function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alex Wong 4Alex Wong 4 

Red bar of the input field

In my page, there are some field are required the users to insert. However, I cannot use the required="true" method in the apex:inputfield. Because this will lead to a standard error message, which cannot shows with the custom error message at the same time. Thus, I remove all the checking in the system and setup checking in the apex code, to generate a custom error message. Is there any althernative to show the red bar in order to alert the users? Thanks.
Best Answer chosen by Alex Wong 4
BALAJI CHBALAJI CH
Hi Alex Wong,

If you want to use the customized Red bar to alert the users as required field, you can try below snippet: 
<apex:panelGroup styleClass="col02 requiredInput" layout="block">
       <apex:panelGroup styleClass="requiredBlock" layout="block"/>
       <apex:inputfield value="{!Contact.FirstName}"/> 
</apex:panelGroup>
Also find below the Sample VF page using above snippet and Screenshot of the output.

VF Page: 
<apex:page standardController="contact" extensions="PracticeAP" >
    <apex:form >
        <apex:pageBlock>
            <apex:commandButton value="Save" action="{!save}"/>
            <apex:pageBlockSection >                
                <apex:pageBlockSectionItem> 
                    <apex:outputText>First Name</apex:outputText>
                    <apex:panelGroup styleClass="col02 requiredInput" layout="block">
                        <apex:panelGroup styleClass="requiredBlock" layout="block"/>
                        <apex:inputfield value="{!Contact.FirstName}"/> 
                    </apex:panelGroup>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Preview of above VF Page code:
User-added image

Please let me know if that helps you.

Best Regards,
BALAJI


 

All Answers

BALAJI CHBALAJI CH
Hi Alex Wong,

If you want to use the customized Red bar to alert the users as required field, you can try below snippet: 
<apex:panelGroup styleClass="col02 requiredInput" layout="block">
       <apex:panelGroup styleClass="requiredBlock" layout="block"/>
       <apex:inputfield value="{!Contact.FirstName}"/> 
</apex:panelGroup>
Also find below the Sample VF page using above snippet and Screenshot of the output.

VF Page: 
<apex:page standardController="contact" extensions="PracticeAP" >
    <apex:form >
        <apex:pageBlock>
            <apex:commandButton value="Save" action="{!save}"/>
            <apex:pageBlockSection >                
                <apex:pageBlockSectionItem> 
                    <apex:outputText>First Name</apex:outputText>
                    <apex:panelGroup styleClass="col02 requiredInput" layout="block">
                        <apex:panelGroup styleClass="requiredBlock" layout="block"/>
                        <apex:inputfield value="{!Contact.FirstName}"/> 
                    </apex:panelGroup>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Preview of above VF Page code:
User-added image

Please let me know if that helps you.

Best Regards,
BALAJI


 
This was selected as the best answer
Alex Wong 4Alex Wong 4
@BALAJI CH Thanks! It works pretty well. I just wonder why the styleclass will come out automatically? 
BALAJI CHBALAJI CH
Hi Alex,
Happy to hear it worked :-)

Here, we are using the Standard style of Salesforce by name "requiredInput" and "requiredBlock" and here  (http://blog.jeffdouglas.com/2008/11/16/displaying-the-required-red-bar-for-a-control/) is the reference for it.
We can also create Custom stylesheets to customize more, For example: if we want the required bar to be coloured as some other than red, we can go for custom style sheets.
Please find below modified sample VF Page for required bar using custom stylesheets and Output screenshot:

VF Page: 
<apex:page standardController="contact" extensions="PracticeAP" >
    <style>
	.bPageBlock .MyRequiredInput {
		height: 100%;
		position: relative;
	}
	.bPageBlock .MyRequiredInput .MyRequiredBlock {
		display: inline;
		background-color:blue;
		bottom: -5px;
		left:-4px;
		position:absolute;
		top:-1px;
		width:3px;
	}
	</style>
    <apex:form >
        <apex:pageBlock>
            <apex:commandButton value="Save" action="{!save}"/>
            <apex:pageBlockSection >                
                <apex:pageBlockSectionItem> 
                    <apex:outputText>First Name</apex:outputText>
                    <apex:panelGroup styleClass="MyRequiredInput" layout="block">
                        <apex:panelGroup styleClass="MyRequiredBlock" layout="block"/>
                        <apex:inputfield value="{!Contact.FirstName}"/> 
                    </apex:panelGroup>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Preview of above VF Page code:
User-added image

Note that in style, I have given color as blue, so required bar is in blue color.

Best Regards,
BALAJI