Display Custom Required Block with Custom Error Messages in VF Page

Sometimes in visual force pages while using custom Apex:SelectOption or Apex:InputText tags, the attribute required = "true" won't work to enforce required field validation, in such cases, the following way is the workaround. Here displaying custom error messages like Error: You must enter a value beneath the fields also added.

Visual Force Page code:

//----------//----------//

<apex:Messages styleClass="errorMsg" />

<apex:pageBlockSection columns="1" id="cityStateBlock">

<apex:inputField list="{! cityList}" required="true" value="{! customObj.City__c}" id="CITY"/>

<apex:pageBlockSectionItem id="stateHolder">

<apex:outputLabel value="STATE" for="STA"/>

<apex:outputPanel layout="block" styleClass="requiredInput">

<apex:outputPanel layout="block" styleClass="requiredBlock"/>

<apex:selectList size="1" value="{! customObj.State__c}" id="empst">

<apex:selectOptions value="{! stateOptions}" />

</apex:selectList>

<apex:outputPanel rendered="{! stateError}">

<div class="errorMsg">

<strong>Error</strong>&nbsp;You must enter a value

</div>

</apex:outputPanel>

</apex:outputPanel>

</apex:pageBlockSectionItem>

</apex:pageBlockSection>

//----------//----------//

Apex Controller code:

//----------//----------//

public Custom_Object__c customObj { get;set; }

public Boolean stateError { get;set; }

//----------//----------//

if(customObj.State__c == Null || customObj.State__c == '') {

ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.ERROR, 'State: You must enter a value'));

stateError = True;

return Null;

}

else {

stateError = False;

}

//----------//----------//

The custom error shows on the top of the page as shown below:

You can also customize the error message on the required field validation beneath the text box.

I hope this helps :)