How to validate empty field on visualforce page with standard errors

I have come across this situation more than often, and using the standard required=true on inputfield or inputText sometimes prevent any submission of the page, which is good for some reason, but will prevent also any refresh.Sometime also, using apex:inputText with required=true, doesn't work. Here is the solution with jquery :

1. First add a styleClass to your all your inputText you want to validate for blank.For this example, i will create only one picklist.

 <table class="detailList" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td class="labelCol">{!$ObjectType.HeaderVoucher__c.fields.numm__AccountingDate__c.label}</td>
                                        <td class="dataCol">
                                            <div class="requiredInput">
                                                <div class="requiredBlock"></div>
                                                <apex:inputField styleClass="jq_req" value="{!dummyPiece.AccountingDate__c}" required="false"/>
                                            </div>
                                        </td>
                                    </tr>
<tr>
                                <td class="pbTitle"></td>
                                <td class="pbButtonb">
                                    <apex:commandButton value="{!$Label.Button_Settlement}" action="{!Regler}" onclick="return validateReglementFields();"/>                                               
                                </td>      
                            </tr>        

note: the styleClass i always use is jq_req.

2. Now look at the jquery functions you need :

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script><script>
 if(typeof jQuery != 'undefined'){
           $j =jQuery.noConflict();
        }
 //2.ADDING AND REMOVING ERRORS ON PAGE
function jq_addError(me,msg){
    if(!($j(me).hasClass('error'))){
        $j(me).addClass("error");
        $j(me).parent().append("<div class='errorMsg'>" + msg + "</div>");
     }
     else{
        $j(me).siblings('.errorMsg').remove();
        $j(me).parent().append("<div class='errorMsg'>" + msg + "</div>");
     }
}

function jq_removeError(me){
    if($j(me).hasClass('error')){
        $j(me).removeClass("error");
        $j(me).siblings('.errorMsg').remove();
     }          
}

//3.VALIDATE FOR REQUIRED BLANK FIELDS
function validateReglementFields(){
    var b = true;
    $j('.jq_req').each(function(){
        if($j(this).val().length == 0){
            jq_addError($j(this),"<b>Erreur:</b>Ce champ est obligatoire");
            b = false;
        }
        else{
            jq_removeError($j(this));
        }              
    });
    return b;
}

</script> 
   
For sure you can store the error message in a label and then reference the label in your javascript code. 

 Here is the resulted error :