How to disply custom client-side error messages on VF pge

Custom Error Messages on VF page

How to dipaly client side error messages like above?

Solution:

 By using jquery you can diplay error messages as you mentioned in the above image
1. First download the jquery file here.
2. If it is not downloading copy the code and paste it in notepad and save it with jquery.js like that.
3. Then upload that file into static resources.
4. In your vf page use the following code

<apex:page standardcontroller="Account" showHeader="false" standardStylesheets="false">
    
    <apex:includeScript value="{!$Resource.jquery}"/>
    <apex:includeScript value="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
    
    <script type="text/javascript"> 
        $(document).ready(function() {
             
            $('[id$=commentForm]').validate();             
             
            $('[id$=name]').rules("add",{
                required: true,
                minlength: 5
            });     
            
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });      
            
            $('[id$=url]').rules("add",{
                url: true
            });
            
            $('[id$=comment]').rules("add",{
                required: true
            });
            
            $('[id$=pwd]').rules("add",{
                required: true,
                minlength: 5
            });
            
            $('[id$=cpwd]').rules("add",{
                required: true,
                minlength: 5,
                equalTo: '[id$=pwd]'
            });      
            
            /* Customised the messages */
            jQuery.validator.messages.required = "You better have entered a value.. or else!"; 
            jQuery.validator.messages.equalTo = "No silly, you're supposed to type the same set of characters AGAIN.";                                                
        });
        
    </script>   
    
    <!-- Ignore my template -->
    <apex:composition template="Template">
        <apex:define name="title">
            <a href="http://thesilverlining-developer-edition.na7.force.com/jqueryvalidatedemo/">jQuery Forms Validation Demo</a>
        </apex:define>
        
        <apex:define name="blurb">
            <p>
                Fiddle with the form entering combinations of correct and incorrect values to see the validation rules in action. Hitting the sumbit button will also trigger form checking.
            </p>
        </apex:define>


        <apex:define name="content">    
            <apex:outputPanel layout="block" style="text-align:center; font-size:12px;padding: 4px">
                <apex:form id="commentForm" > 

                        <apex:outputlabel for="name">Name <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="name" value="{!account.name}"/>
                        <br/>
                        <apex:outputlabel for="email">E-Mail <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="email"  value="{!account.name}"/> 
                        <br/>
                        <apex:outputlabel for="url">URL (optional)</apex:outputlabel> 
                        <apex:inputtext id="url"  value="{!account.name}" /> 
                        <br/>
                        <apex:outputlabel for="comment">Your comment <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtextarea id="comment" value="{!account.name}" style="width: 30%"/>
                        <br/>
                        <apex:outputLabel for="pwd">Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="pwd" value="{!account.name}"/>
                        <br/>
                        <apex:outputLabel for="cpwd">Confirm Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="cpwd" value="{!account.name}"/>                        
                        <br/>
                        <input type="submit" />
            
                </apex:form>
            
            </apex:outputPanel>
            
        </apex:define>
        
    </apex:composition>
     
</apex:page>

5. make changes according to your vfpage.
6. Then you will get the desired output

Refer Here:

 http://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/#more-543