Обнаружить наличие 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. Оба не будут работать вместе. Вы можете перепутать. Однако результат не может быть дружественным по отношению к UX.

Вы можете посмотреть приведенный пример здесь:

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>