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

Question

我对如何在单击按钮时检测到 html5 验证错误的存在感兴趣。 当您单击下面代码段中的“登录”按钮而不在输入字段中输入任何值时，可以看到我所指的错误消息类型。

 <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>

谢谢你的帮助！

Answer 1

HTML 5 验证不同于自定义验证。 如果您想要自定义验证，则必须放弃 html5 验证。 两者不会一起工作。 你可以混为一谈。 然而，结果不可能是用户体验友好的。

您可以在此处查看给定的示例：

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>