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>