Two duplicate error messages on VF page

Issue: When custom/standard input fields are used with custom label and are required on visualforce page, then pageMessages shows two error messages. Lets check below example with code:

<apex:page StandardController="Contact" sidebar="false" showHeader="false" >  
   <apex:form >  
     <apex:pageBlock title="Complete below form">  
       <apex:pageMessages />  
       <apex:pageBlockButtons location="bottom">  
         <apex:commandButton action="{!save}" value="Save" />  
       </apex:pageBlockButtons>  
       <apex:pageBlockSection title="Confirm Below Fields">  
                     <apex:inputField label="Your Birth Date" value="{!contact.Birthdate}" required="true"/>  
       </apex:pageBlockSection>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>  

When you need to change standard label with custom one on VF page then page message will show two error instead of one as stated above.


Solution: Explicitly change label on load client side using jquery. It requires:

• Custom Label -> to provide ease to user to set desired custom label.
• div element with static id -> to wrap <apex:pageMessages /> within so that it can be identified at client side. 
• jQuery -> to browse through the html elements on client side(browser).

The VF page code:

 <apex:page StandardController="Contact" sidebar="false" showHeader="false" >   
      <script src="https://code.jquery.com/jquery-2.2.0.min.js" />   
      <apex:form >   
           <apex:pageBlock title="Complete below form">   
                <div id="errorPanel">   
                     <apex:pageMessages />   
                </div>   
                <apex:pageBlockButtons location="bottom">   
                     <apex:commandButton action="{!save}" value="Save" />   
                </apex:pageBlockButtons>   
                <apex:pageBlockSection columns="1" title="Confirm Below Field">   
                     <apex:pageblockSectionItem>   
                     <apex:outputLabel value="{!$label.Contact_BirthDate}"></apex:outputLabel>   
                     <apex:inputField value="{!contact.Birthdate}" required="true"/>   
                     </apex:pageblockSectionItem>       
                </apex:pageBlockSection>   
           </apex:pageBlock>   
      </apex:form>   
      <script>   
           window.onload = changeErrorLabels();   
           function changeErrorLabels(){   
           var msgEle = $("#errorPanel").find(".messageText");   
           var replacedHtml = msgEle.html().replace('Birthdate','{!$label.Contact_BirthDate}');   
           msgEle.html(replacedHtml);   
           }   
      </script>   
 </apex:page>  

The above solution once implemented provides flexibility to user to change/modify custom label with desired label text that have same error message labels on VF page.

Click here to see working demo, Happy Coding :) !!