Making a Field Appear Required on a Visualforce Page

I’ve been working on a force.com app which had the requirement that a user must enter a valid email address 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.

In my original Visualforce page, it seemed logical that if I set the recipient email field to be 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

public class GiftCardTestController {
    private ApexPages.StandardController std;
    public String cEmail {get;set;}
    public Gift_Card_Order__c gc {get;set;}
    public GiftCardTestController(ApexPages.StandardController stdCtrl) {
        std = stdCtrl;
    }
    public void fillEmail() {
        gc = (Gift_Card_Order__c)std.getRecord();
        cEmail = [select Id, Email from Contact where Id = :gc.Contact__c].Email;
        gc.Recipient_Email__c = cEmail;
    }
}

Original Visualforce Page

<apex:page standardController="Gift_Card_Order__c" extensions="GiftCardTestController" title="Gift Card Test">
    <apex:form>
        <apex:pageblock title="Gift Card" mode="edit">
            <apex:pageblockbuttons location="top">
                <apex:commandbutton action="{!save}" value="Save" />
                <apex:commandbutton action="{!cancel}" value="Cancel" />
                <apex:commandbutton action="{!fillEmail}" value="Fill Email" />
            </apex:pageblockbuttons>
            <apex:pageblocksection title="Email Info" columns="1">
                <apex:inputfield value="{!Gift_Card_Order__c.Contact__c}" />
                <apex:inputfield value="{!Gift_Card_Order__c.Recipient_Email__c}" required="true" />
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex:page>

In this example, the fillEmail() action is supposed to 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

public class GiftCardTestController {
    private ApexPages.StandardController std;
    public String cEmail {get;set;}
    public Gift_Card_Order__c gc {get;set;}
    public GiftCardTestController(ApexPages.StandardController stdCtrl) {
        std = stdCtrl;
    }
    public void fillEmail() {
        gc = (Gift_Card_Order__c)std.getRecord();
        cEmail = [select Id, Email from Contact where Id = :gc.Contact__c].Email;
        gc.Recipient_Email__c = cEmail;
    }
    // add custom save method...
    public pageReference save() {
        gc = (Gift_Card_Order__c)std.getRecord();
        // if the recipient email is null, add an error to the field
        // and return null to remain on the current page...
        if(gc.Recipient_Email__c == null) {
            gc.Recipient_Email__c.addError('A valid email address is required.');
            return null;
        }
        // otherwise, the field is filled, so it's okay to redirect to view page.
        // standard field validation will check for valid email format.
        else {
            update gc;
            PageReference pr = new PageReference('/' + gc.id);
            pr.setRedirect(true);
            return pr;
        }
    }
}

New Visualforce Page

<apex:page standardController="Gift_Card_Order__c" extensions="GiftCardTestController" title="Gift Card Test">
    <apex:form>
        <apex:pageblock title="Gift Card" mode="edit">
            <apex:pageblockbuttons location="top">
                <apex:commandbutton action="{!save}" value="Save"/>
                <apex:commandbutton action="{!cancel}" value="Cancel" />
                <apex:commandbutton action="{!fillEmail}" value="Fill Email" />
            </apex:pageblockbuttons>
            <apex:pageblocksection title="Email Information" columns="1">
                <apex:inputfield value="{!Gift_Card_Order__c.Contact__c}" />
                <apex:pageblocksectionitem>
                    <apex:outputlabel>Email Recipient</apex:outputlabel>
                    <apex:outputpanel layout="block" styleClass="requiredInput">
                        <apex:outputpanel layout="block" styleClass="requiredBlock"/>
                        <apex:inputfield value="{!Gift_Card_Order__c.Recipient_Email__c}" />
                    </apex:outputpanel>
                </apex:pageblocksectionitem>
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex: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 and asking to discover. Hopefully this post saves someone else the time it took me to discover — and me the time when I forget it.

For convenience, here’s a Github Gist: https://gist.github.com/4595878