How to Create a Custom Required Block for a Visualforce Page

August 26, 2016 Appirio

While working on Visualforce (VF) pages, we generally make some fields required on the page using the Apex tag “<Apex:inputField>” as shown below:

<apex:inputField value=”{!Account.Name}”  required=”true” />

This works perfectly in most cases and is a great VF attribute. Unfortunately, the validations get fired on those fields with every Ajax call (i.e., every time we make a call to the controller) on the page. So if there is a requirement where the user should get a validation message only when they are actually submitting the form — and not when the page is running some internal process — this required attribute does not fulfill the purpose. To accomplish such requirements, we can use custom required blocks.

Demo Walkthrough…

Create a VF component to display the red bar before the input fields in the same way as it is displayed for standard required fields.

VF Component: RequiredBlock

<apex:component access=”global” id=”requiredblock”>




             height: 17px;

             width: 3px;

             display: inline;

             position: absolute;

             margin-top: 2px;


      input, select, textarea {




  <div class=”requiredDiv”></div>                                


Implementation on VF page

Scenario #1 — single field implementation:

Static required field


<apex:outputLabel value=”Account Type” for=”typeField”/>

<apex:outputPanel id=”typeField”>

<c:RequiredBlock />

<apex:inputField value=”{!Account.Type}” />

<!– Field specific error message –>

                       <div class=”errorMsg” style=”display:{!IF(AND(isError, ISBLANK(Account.Type)), ‘block;’, ‘none;’)}”>

                       <strong>Error:</strong>&nbsp; You must enter this value.




Scenario #2 — fieldset implementation. (Make your field required in the fieldset to make it show as required on your VF page.)

Apex logic

First, create a map to store field specific error messages (FieldLabel → ErrorMessage):

map<String, String> fieldErrors = new map<String, String>();

Next, create a method to validate data before save, when user submits the form:

// To check if all required fields are populated or not

   public void requiredFieldValidation(){

          isError = false;


      for (Schema.fieldsetMember f : Schema.Sobjecttype.Account.fieldsets.FIELD_SET_NAME.getFields()){

                 if(acc.get(f.getFieldPath()) == null){

         fieldErrors.put(f.getLabel(), ‘You must enter a value.’);

         isError = true;



        if(!isError){ //save your data }


Then, create a delimited string of all field labels with errors to display on the page:

public String SEPARATOR = ‘~’;  

public String delimitedStrOfErrorKeys {get{

      List<String> errorFields = new List<String>(fieldErrors.keySet());


      return SEPARATOR + string.join(errorLst, SEPARATOR) + SEPARATOR;


VF page

RequiredBlock for Dynamic fields

<apex:pageBlockSection title=”My Dynamic Section” columns=”2″ >

 <apex:repeat value=”{!$ObjectType.Account.FieldSets.Field_Set_Name}” var=”f”>

<apex:pageBlockSectionItem id=”sectionItem” >                                                   

   <apex:outputLabel value=”{! f.Label}” for=”fieldPanel”/>

   <apex:outputPanel id=”fieldPanel”>


          <!– required red bar –>

          <c:RequiredBlock rendered=”{! OR(f.Required, f.DBRequired)}” />


          <!– Input field –>

          <apex:inputField value=”{! Account[f]}” />


          <!– Field specific error message –>

          <div class=”errorMsg” style=”display:{!IF(CONTAINS(delimitedStrOfErrorKeys, SEPARATOR + f.Label + SEPARATOR), ‘block;’, ‘none;’)}”>

          <strong>Error:</strong>&nbsp; {! IF(CONTAINS(delimitedStrOfErrorKeys, SEPARATOR + f.Label + SEPARATOR), fieldErrors[f.Label], ”)}







<apex:commandButton action=”{! requiredFieldValidation}” value=”Validate & Save” />

This implementation would give the user a custom “required field” functionality with the standard SFDC UI, along with all the validations handled at server side.




Previous Article
11 Must-Haves for New Salesforce Developers
11 Must-Haves for New Salesforce Developers

By Gaurav Gupta When Salesforce launched 15 years ago, we didn’t yet know that it would become one of the w...

Next Article
How to Access Large Document in Chunks from SpringCM Using Apex
How to Access Large Document in Chunks from SpringCM Using Apex

By Satyanarayan Choudhary SpringCM is a cloud-based enterprise content management system that lets you mana...