how to show the validation error below the input field in VF page

Question

I have used the following code for the email validation and the validation is working fine but I would like to show the error like the the image. how to do that?

My Code:

 <apex:pageBlock id="myblock">
       Email  <apex:inputText value="{!email}" id="email"/><br/><br/>
        <apex:commandButton value="Click me!"  action="{!checkEmail}"/>
 </apex:pageBlock>

Apex:

 public void checkEmail()
    {
        if(!Pattern.matches('[a-zA-Z0-9._-]+@[a-zA-Z]+.[a-zA-Z]{2,4}', email))
        {
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.Error, 'Check your email')); 
        }
    }

My expected View:

Answer 1

Try below code:

<apex:pageBlock id="myblock">
    Email <apex:inputText value="{!email}" id="email"/><br/><br/>
    <div class="errorMsg">
        <strong></strong>&nbsp;{!emailError}
    </div>
    <apex:commandButton value="Click me!"  action="{!checkEmail}"/>
</apex:pageBlock>

Apex:

if(!Pattern.matches('[a-zA-Z0-9._-]+@[a-zA-Z]+.[a-zA-Z]{2,4}', email))
        {
         emailError ='Either first name or middle name must be defined';
        }

Answer 2

You can't use the apex pagemessages functionality to achieve this - you'll have to roll your own to a degree, capturing the errors in controller properties and conditionally rendering markup to decorate the fields in error.

I wrote a blog post on this very topic some time ago:

http://bobbuzzard.blogspot.co.uk/2011/04/field-level-error-messages-with_29.html

Answer 3

I think you can create a new instance of the ApexPages.Message class using the following signature.

public Message(ApexPages.Severity severity, String summary, String detail, String id)

And then add this ApexPages.Message instance to ApexPages using ApexPages.addmessage.

Note ID should be id of your field where you want to show the Error.

For more details refer

https://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=apex_methods_system_apexpages.htm|StartTopic=Content%2Fapex_methods_system_apexpages.htm|SkinName=webhelp

Let me know if you face any issue.

Answer 4

The standard email field can validate email format automatically, we can use that. For example, you can declare Account instance, then bind Account.Email with . If the email you typed is invalid, the error is 'Error: Invalid Email Address'. Then you can get email value in your apex code.

This is the easiest way i have known.