VisualForce Input validation component

We know <apex:InputField/> binds sObjects. For that reason, Salesforce display error messages just below the field like this if mandatory field values are not entered:

There are situations where we cannot use InputField to display to capture records. For example, if we need to display records from the wrapper class instance then, we have to use <apex:inputText/> instead of <apex:inputField/>. Otherwise, Salesforce will display error message:

<apex:inputField> can only be used with SObject fields

Workaround (easy)

Wrap inputText field either <apex:outputPanel/> or <div> and use styleclass "requiredInput" and "requiredBlock" which are Salesforce provided.

1
2
3
4
<div class="requiredInput">
 <div class="requiredBlock"></div>
 <apex:inputText value="{!obj.LastName}" id="LastName" label="LastName" required="true"/>                            
</div>

Salesforce recommends not to use this kind of coding rather create your own components at this situation.

Workaround (Visualforce component)

I have tried to create a component referencing this site Controller Component Communication

1. Created PageControllerBase class (as it is specified)
2. Created ComponentControllerBase class (as it is specified)
3. myVFPComponent

This Visualforce Component has inputText field which will be rendered and styled to show it is required input and display error message when error occurred.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<apex:component controller="MyComponentController" >
    <style type="text/css">
     .verticalLine {
          border-left: 2px solid red; padding-left: 2px;
        }
      .roundBorder {
          border: 2px solid red; padding-left: 2px;
        }
   </style>
    
  <apex:attribute name="pageControllerAttribute" 
      type="PageControllerBase" 
      assignTo="{!pageController}" 
      required="true" 
      description="The controller for the page." />

 <!-- Component Definition -->
    <!-- Vertical line (left solid line) will show normally for required attribute. 
 In case of error, textbox will be shown as round border -->
  <apex:outputPanel >
         <div>
               <apex:inputText value="{!FirstName}" styleClass="{!IF(isError,'roundBorder', 'verticalLine')}"/>           
         </div>
         <div>
                <apex:outputLabel rendered="{!isError}" value="Error:" style="color: red; font-weight:bold;"/>
                <apex:outputLabel rendered="{!isError}" value="You must enter a value." style="color: red;"/>
            </div>        
 </apex:outputPanel> 
</apex:component>

4. Visualforce Component Controller

1
2
3
4
public with sharing class MyComponentController extends ComponentControllerBase {   
  public String FirstName {get;set;}
  public Boolean isError {get;set;}    
}

5. Visualforce Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<apex:page controller="MyPageController">
 <apex:form>
  <apex:pageBlock>
   <apex:pageBlockSection columns="1">
    <apex:pageBlockSectionItem >
     <apex:outputLabel value="Enter First Name:"/>
     <c:myVFPComponent pageControllerAttribute="{!this}" id="compId"/>
    </apex:pageBlockSectionItem>
   </apex:pageBlockSection>
   <apex:pageBlockButtons location="bottom">
    <apex:commandButton style="font-size: 12pt; color: black" 
    action="{!callComponentControllerMethod}" value="Verify" rerender="compId"/> 
   </apex:pageBlockButtons>
  </apex:pageBlock>
 </apex:form>
</apex:page>

6. Visualforce Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public with sharing class MyPageController extends PageControllerBase {

public MyComponentController myComponentController { get; set; }

  public override void setComponentController(ComponentControllerBase compController) {
    myComponentController = (MyComponentController)compController;
  }

  public override ComponentControllerBase getMyComponentController() {
    return myComponentController;
  }

  public PageReference callComponentControllerMethod() {
    try {
            myComponentController.isError = false;  //make error as false

            //verify validation
            if(String.isBlank(myComponentController.FirstName)) {
                myComponentController.isError = true;
                throw new MyCustomException ('Value is required'); //dummy error
            }
            return null;           
        } catch (Exception ex)
        {
             ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.Error, ex.getMessage());
             ApexPages.addMessage(msg);            
        }
        return null;
  } 
}

Now, after loading the Visualforce , input field will be displayed like this:

If input is empty, it will show error message like this: