HTML5 フォームのエラーメッセージのカスタマイズ customizing-error-messages-for-html-forms

markError: function (jqWidget, msg, type) {
            var element = jqWidget.element,                                //Gives the div containing widget
                pos = $(element).offset(),                          //Calculates the position of the div in the view port
                                                                msgHeight = xfalib.view.util.TextMetrics.measureExtent(msg).height + 5;  //Calculating the height of the Error Message
                styles = {};
                styles.left = pos.left + "px";         // Assign the desired left position using pos.left. Here it is calculated for exact left of the field
                styles.top = pos.top - msgHeight + "px";  // Assign the desired top position using pos.top. Here it is calculated for top of the field
            if (type != "warning") {
                if(!jqWidget.errorDiv){
                                                                                //Adding the warning div if it is not present already
                    jqWidget.errorDiv=$("<div id='customError'></div>").appendTo('body');
                }
                jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the warning div
                jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
            } else {
                if(!jqWidget.errorDiv){
                                                                                //Adding the error div if it is not present already
                    jqWidget.errorDiv=$("<div id='customWarning'></div>").appendTo('body');
                }
                jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the error div
                jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
            }

        },

#customError {
color: #0000FF; // it changes the color of Error Message
display:none;
position:absolute;
opacity:0.85;
font-size: 24px;  // it changes the font size of Error Message
z-index:5;
}

#customWarning {
color: #00FF00;  // it changes the color of Warning Message
display:none;
position:absolute;
opacity:0.85;
font-size: 18px;   // it changes the font size of Warning Message
z-index:5;
}

Save the changes.