Adding required Red mark on VF page elements

Hi  Guys,

When we use inputField which is directly connected to a object's record then salesforce takes care of Red required mark before field in VF page. For example: Create a test page:testRequiredField

https://c.ap1.visual.force.com/apex/testRequiredField?id=<account Id>

<apex:page standardController="Account" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <apex:inputField value="{!account.NumberofLocations__c}"/>
             </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
</apex:page>

Initally Field NumberofLocations__c is non required so page will be rendered like this.



Now, go to account-> Fields->Edit NumberofLocations__c and make this field Required. Now, when we refresh same page, You will notice Red mandatory mark before NumberofLocations__c (Which comes automatically as salesforce know it is mandatory field.).


 Coming to custom controller,

Page: testRequiredField

<apex:page controller="AccountCustomController" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <apex:inputField value="{!account.NumberofLocations__c}"/>
             </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
</apex:page>

Class;

public class AccountCustomController {

    public Account account { get; set; }
   
    public AccountCustomController (){
   
    String id= apexpages.currentpage().getparameters().get('id');
    account =[select id, name,NumberofLocations__c from Account where id=:id limit 1 ];
   
    }
}

It will also give same result.

But Lets say we need a new text box which is not a field in object and we need show it mandatory. Here is the tip.

Enclose your text box in div with class requiredInput and put another div with class requiredBlock where you want to show Red mark.

Page: testRequiredField


<apex:page controller="AccountCustomController" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <div class="requiredInput">
                    <div class="requiredBlock"></div>
                    <input type="text" value="Fill your name here"  />
                 </div>              
             </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
</apex:page>

 

TIP: If adding Div like this is not working for you, please ensure standard style sheets are not disabled for your page. (<apex:page standardStylesheets="false" />). In that case you may have to write same CSS at your own.

Making it Conditional: If you want to make it conditional, you can add conditions on Div class like this.

<apex:page controller="AccountCustomController" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <div class="requiredInput">
                     <div  class="{!IF(<Condition>','','requiredBlock')}"  style="position: absolute;"></div>
                    <input type="text" value="Fill your name here"  />
                 </div>              
             </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
</apex:page>

Also, If you want to rerender it on some event and don't want to enclose Div section in outputpanel, you can change Div into outputPanel like this.

<apex:page controller="AccountCustomController" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <apex:outputPanel Styleclass="requiredInput" layout="block" id="myPanel">
                    <div class="requiredBlock"></div>
                    <input type="text" value="Fill your name here"  />
                 </apex:Outputpanel>              
             </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
</apex:page>

As apex:outputPanel will be rendered as Div in browser, styleclass will be converted into Class, so In browser it will be rendered as Div.