Making a Field Appear Required on a Visualforce Page

I’ve been working on a app with the requirement that a user must enter a valid email address on a Visualforce page before being able to save a record, but they must also be able to insert the related contact’s email address by clicking a button instead of having to leave the edit page to go find it. That seemed simple enough, but it wasn’t. This is my solution for making a field appear required on a Visualforce page.visualforce

In my original Visualforce page, it seemed logical that if I set the recipient email field as required, all would work as expected. However, defining the field as required prevented my custom action in my page controller from firing and entering the email address.

### Original Page Controller

### Original Visualforce Page

In this example, the fillEmail() action should select the related contact email address, and put the value in the Recipient_Email__c field so the user can see it.

But it’s not that simple it seems. When the field had the required="true" attribute set, the action would not fire because all validation is done on the client side and the page never posts back to the server — so the controller action never gets called.

So after some digging and asking for help on the Salesforce discussion boards, the solution was to make the Recipient_Email__c appear as if it’s required on the page (though it’s really not), and add a new save method to my controller to handle field validation on the server side when the record gets saved.

### New Page Controller

### New Visualforce Page

Notice the <apex:pageblocksectionitem /> code to replace the original field. This is how we make the field appear with the “required” bar. A nifty trick that took some digging to discover. Hopefully this post saves someone else the time it took me to figure it out — and me the time when I forget it.

For convenience, here’s a Github Gist with field label & inline help that shows exactly how to make a field appear required on a Visualforce page.

12 thoughts on “Making a Field Appear Required on a Visualforce Page

  1. Hi Jim,

    Good post, please let me know, if i have more than two fields are in the page. now i want to get an 2 error messages at a time, if i missed two fields.

    How can we get this.

    Please help me on this.

    Thanks in advance



    • @Balu

      I might try something like this (note, it’s not been tested):

      if(a.Field_One__c == null || a.Field_Two__c == null) {
          if(a.Field_One__c == null) {
              a.Field_One__c.addError('Field one was not completed.');
          if(a.Field_Two__c == null) {
              a.Field_Two__c.addError('Field two was not completed.');
          return null;
      else {

      This should (in theory) attach the field error to each field separately.


  2. I was looking for something similar. It works fine but now the alignment of the field is changed. It looks very out of the proportion on my VF. Any suggestions?


    • Without knowing what your code is, all you really need for your cancel button to work properly is this snippet on the Visualforce page:

      <apex:commandbutton action="{!cancel}" value="Cancel" />


    • That would require doing some boolean logic with the “rendered” attribute on the <apex:pageblocksectionitem> tag, but then you’d have to also do a refresh with some JavaScript to get it to show/hide — but it is possible to do.


Join the Discussion

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s