检测是否存在 HTML5 验证错误消息

Question

I'm interested in how I might detect the presence of an html5 validation error on the click of a button. The type of error message I'm referring to can be seen when you click the 'login' button in the snippet below without entering any values into the input fields.

 <form id="form" onsubmit="return(login())"> <input name="username" placeholder="Username" required /> <input name="pass" type="password" placeholder="Password" required/> <br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/> <input id="submitbutton" type="submit" name="submit" value="Log In"/>

<script>   
        $(document).on('click', '#submitbutton', function() {

            //do something if there is at least one html5 validation error

        });
</script>

Thanks for your help!

Answer 1

HTML 5 validation is different from custom validation. If you want custom validation, you have to drop off html5 validation. Both wont work together. You can mix up. However, the result could not be UX friendly.

You can look at the given example here:

https://www.tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <ul class="errorMessages"></ul> <div> <label for="name">Name:</label> <input id="name" type="text" required> </div> <div> <label for="comments">Comments:</label> <textarea id="comments" required></textarea> </div> <div class="buttons"> <button>Submit</button> </div> </form>​ <script> var createAllErrors = function() { var form = $( this ), errorList = $( "ul.errorMessages", form ); var showAllErrorMessages = function() { errorList.empty(); // Find all invalid fields within the form. var invalidFields = form.find( ":invalid" ).each( function( index, node ) { // Find the field's corresponding label var label = $( "label[for=" + node.id + "] "), // Opera incorrectly does not fill the validationMessage property. message = node.validationMessage || 'Invalid value.'; errorList .show() .append( "<li><span>" + label.html() + "</span> " + message + "</li>" ); }); }; // Support Safari form.on( "submit", function( event ) { if ( this.checkValidity && !this.checkValidity() ) { $( this ).find( ":invalid" ).first().focus(); event.preventDefault(); } }); $( "input[type=submit], button:not([type=button])", form ) .on( "click", showAllErrorMessages); $( "input", form ).on( "keypress", function( event ) { var type = $( this ).attr( "type" ); if ( /date|email|month|number|search|tel|text|time|url|week/.test ( type ) && event.keyCode == 13 ) { showAllErrorMessages(); } }); }; $( "form" ).each( createAllErrors ); </script>