Client Side JS validation with same style as standard apex controller error validation on VF page messages

Demo: 

Click Here

Code:

    
    <apex:pageBlock title="Sample JS validation" id="thePageBlock">

        <div class="message errorM3" role="alert" id="errorMessageDIV" style="display:none">
            <table border="0" cellpadding="0" cellspacing="0" class="messageTable" style="padding:0px;margin:0px;">
                <tbody>
                    <tr valign="top">
                        <td>
                            <img alt="ERROR" class="msgIcon" src="/s.gif" title="ERROR" />
                        </td>
                        <td class="messageCell">
                            <div id="errorMessageTD" class="messageText">
                                <span id="errorMessageSPAN" style="color:#cc0000">
                                    <h4>Error:</h4>
                                </span>
                                <ul style="margin: 0; padding: 0;" id="errorMessageUL">
                                  <li>-Field ID-:- Field Label-: -Error Type-: -Error Message-.</li>
                                </ul>
                            </div>
                        </td>
                    </tr>            
                </tbody>
            </table>
        </div>
        
        <apex:pageBlockSection title="Testing the NULL validation on text box" columns="1" collapsible="false">            
            <apex:form >
                <apex:outputLabel value="Subject" for="theSubject" />:<br />     
                <apex:inputText id="theSubject" maxlength="80" required="true"/>
                <input type="button" value="Validate"  onclick="return addErrorJS();" class="btn"/>
            </apex:form>
        </apex:pageBlockSection>
    </apex:pageBlock>
    
    <script>
    var sErrUL = document.getElementById("errorMessageUL");    
    function addErrorJS() 
        { 
            var sSub = document.querySelector("input[id$='theSubject']");
            var sErrDiv = document.getElementById("errorMessageDIV");
            sErrUL.innerHTML = "";
            
            if(sSub.value)
            {
                console.log(sSub); 
                
                if(sErrDiv)
                {
                    sErrDiv.style.display = 'none';
                }
            }
            else
            {
                var sErrMsg = 'Subject: Validation Error: Value is required.';
                sErrDiv.style.display = 'block';
                createErrorNode(sErrMsg);
            }
            
        }
    
        function createErrorNode(sErrMsg)
        {
            var li = document.createElement("li");
            var children = sErrUL.children.length + 1;
            li.setAttribute("id", "element"+children)
            li.appendChild(document.createTextNode(sErrMsg));
            sErrUL.appendChild(li);
        }
    </script>
    
</apex:page>