Lightning - how to use apex:pageMessages in a VisualForce page with SLDS

Question

I'm using SLDS library to decorate a VisualForce page and have got some standard validation rules defined at the back, How could I throw the error message to the VF page with using apex:pageMessages?

Please see the below code;

<apex:page standardController="Account" showHeader="false" sidebar="false" showQuickActionVfHeader="true" docType="html-5.0">
<apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
<div class="slds" >
    <h2 class="slds-page-header slds-text-heading--small slds-truncate" title="Account">Account - Appointment</h2>
    <apex:form >
        <div class="slds-box">


            <apex:pageMessages />


            <apex:outputPanel layout="block1"  id="auth" >
                <div class="slds-tile">
                    <div class="slds-form--horizontal">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="EffectiveDate">{!$ObjectType.Account.fields.EffectiveDate__c.Label}</label>
                            <div class="slds-form-element__control">
                                <apex:inputfield styleclass="slds-input slds-size--10-of-12" value="{!Account.EffectiveDate__c}"/>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="Authority">{!$ObjectType.Account.fields.Authority__c.Label}</label>
                            <div class="slds-form-element__control">
                                <apex:inputfield styleclass="slds-input" value="{!Account.Authority__c}"/>
                            </div>
                        </div>

                    </div>
                    <div class="slds-m-vertical--large"></div>      
                </div> 
            </apex:outputPanel> 
        </div>
        <div class="slds-col slds-no-flex slds-align-bottom slds-m-around--small" id="saveDiv">
            <div class="slds-button-group" role="group">
                <apex:commandButton onclick="openConfirmationPopup()"  immediate="false" styleClass="slds-button slds-button--neutral slds-button--brand" value="Save" reRender="none" />
            </div>
        </div>
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-closed" id="tstpopup" >
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Update Movement Details</h2>
                    <button class="slds-button slds-button--icon-inverse slds-modal__closed">
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
                <div class="slds-modal__content">
                    <div>
                        <p>Are sure, you want to save the Movement details?</p>
                    </div>
                </div>
                <div class="slds-modal__footer">
                    <div class="slds-x-small-buttons--horizontal">
                        <apex:commandButton styleClass="slds-button slds-button--neutral" value="Cancel" onclick="closePopup()" />
                        <apex:commandButton styleClass="slds-button slds-button--neutral slds-button--brand" value="Confirm" action="{!save}" immediate="false" reRender="none" onclick="confirmed()" oncomplete="hideSpinner()" />
                    </div>
                </div>
            </div>
        </div>
        <div id="backdropDiv" class="slds-modal-backdrop slds-modal-backdrop--closed"></div>
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-closed" id="spinnerDiv">
            <div class="slds-modal__container">
                <div class="slds-align-content-center">
                    <div class="slds-spinner--medium" >
                        <img src="/resource/slds0120/assets/images/spinners/slds_spinner_brand.gif" alt="Loading..." />
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</div>  

<script> 

// open the confirmation popup
function openConfirmationPopup(){  
    document.getElementById("tstpopup").className =
        document.getElementById("tstpopup").className.replace( /(?:^|\s)slds-fade-in-closed(?!\S)/g , ' slds-fade-in-open' )
    showBackDrop();
    return true;
}

// close the confirmation
function closeConfirmationPopup(){       

    document.getElementById("tstpopup").className =
        document.getElementById("tstpopup").className.replace( /(?:^|\s)slds-fade-in-open(?!\S)/g , ' slds-fade-in-closed' )

    hideBackDrop();
    return false;
}

// hide the transparent overlayer on message popup 
function hideBackDrop(){    
    document.getElementById("backdropDiv").className =document.getElementById("backdropDiv").className.replace
    ( /(?:^|\s)slds-modal-backdrop--open(?!\S)/g , ' slds-modal-backdrop--closed' )
    return false;
}

// show the transparent overlayer on message popup
function showBackDrop(){    
    document.getElementById("backdropDiv").className =document.getElementById("backdropDiv").className.replace
    ( /(?:^|\s)slds-modal-backdrop--closed(?!\S)/g , ' slds-modal-backdrop--open' )
    return false;
}

// show the progress spinner
function showSpinner(){    
    document.getElementById("spinnerDiv").className = document.getElementById("spinnerDiv").className.replace
    ( /(?:^|\s)slds-fade-in-closed(?!\S)/g , ' slds-fade-in-open' )
    return false;
}

// hide the progress spinner
function hideSpinner(){  
    document.getElementById("spinnerDiv").className = document.getElementById("spinnerDiv").className.replace
    ( /(?:^|\s)slds-fade-in-open(?!\S)/g , ' slds-fade-in-closed' )
    return false;
}

// on confirmation we close the dialog modal and start showing the spinner
function confirmed(){
    closeConfirmationPopup();
    showSpinner();
}

</script>

Answer 1

Try this:

<apex:page controller="ConvertPageMessagesController"  >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.lightningdesignsystem.com/assets/styles/slds.css"/>

<style>
.msgIcon {
    display: none!important
}
.customMessage * {
    color: #fff!important
}
.customMessage {
    margin: 5px 0!important;
    max-width: 1280px;
    opacity: 1!important;
    width: 100%;
    font-size: 12px;
    border: 0px;
    padding-left: 10px;
}
.message {
    opacity: .1
}
</style>


<script>
    $(document).ready(function(){
       overridePageMessages();    
    });

    function overridePageMessages(){    
        var textureEffect = '';
        //Uncomment below line for texture effect on page messages
        //textureEffect = 'slds-theme--alert-texture';

        $('.warningM3').addClass('slds-notify slds-notify--toast slds-theme--warning customMessage '+textureEffect);          
        $('.confirmM3').addClass('slds-notify slds-notify--alert slds-theme--success  customMessage '+textureEffect);    
        $('.errorM3').addClass('slds-notify slds-notify--alert slds-theme--error customMessage '+textureEffect);                  
        $('.infoM3').addClass('slds-notify slds-notify--toast customMessage '+textureEffect);    

        $('.errorM3').removeClass('errorM3'); 
        $('.confirmM3').removeClass('confirmM3'); 
        $('.infoM3').removeClass('infoM3');   
        $('.warningM3').removeClass('warningM3');  
    }
</script>
<apex:pagemessages/>
</apex:page>

This is what it looks like (in comparison):

Source: https://vishnuvaishnav.wordpress.com/2016/02/21/convert-standard-page-messages-in-lightning-design-system/