Check the validity of an HTML5 form that does not contain a submit button

/* Check if html5 validation enabled */
function hasHtml5Validation () {
    return typeof document.createElement('input').checkValidity === 'function';
}


var $form = $("form");
$form.find("input.save-and-next").click(function() {
    $form.find(":input").each(function() {
        //if(!$(this).checkValidity()) {
        if(!$(this)[0].checkValidity()) {            
            $form.find("input[type='submit']").click();
            return false;
        }
    });
});

When you select  $(this) you get a collection of nodes, to access actual DOM properties you must select the numbered one such $(this)[0].

Or you can bind validation process to a form field such as:

form.find("input[type='text']").keyup(function() {
    if(!$(this)[0].checkValidity()) {
        form.find("input[type='submit']").click();
    }
});

jsFiddle link

Html5 & jQuery form validation and get all error at a time

jsFiddle link example

Html code

<form method='post'>
    <ul class="errorMessages"></ul>
    <div class="one">
        <label for="name">Name:</label>
        <input id="name" type="text" required="required"/>
    </div>
    <div class="two">
        <label for="comments">Comments:</label>
        <textarea id="comments" required="required"></textarea>
    </div>
    <div class="three">
        <label for="roll">Name:</label>
        <input id="roll" type="text" required="required"/>
    </div>
    <div class="four">
        <label for="email">Email:</label>
        <input id="email" type="email" required="required"/>
    </div>
    <div class="five">
        <label>Group:</label>
        <input type='radio' name='group' required="required"/> Group 1
        <input type='radio' name='group' required="required"/> Group 2
        <input type='radio' name='group' required="required"/> Group 3
    </div>
    <div class="buttons">
        <button type="submit" class="submit">Submit</button>
        <button type="button">Check</button>
    </div>
</form>

jQuery code

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 + "] ").html();
            if(label === undefined) {
                label = "";
            }
            // Opera incorrectly does not fill the validationMessage property.
            var message = node.validationMessage || 'Invalid value.';
            errorList.append( "<li><span>" + label + "</span> " + message + "</li>" );
        });
        errorList.show();
        return errorList.find("li").size();
    };

    form.find("button[type='button']").click(function() {
        var errorLength = showAllErrorMessages();
        errorList.show().prepend( "<li><span>Total Errors: </span> " + errorLength + "</li>" );
        form.find( "button.submit").click();
    });
    
    // Support Safari
    form.on( "submit", function( event ) {
        if ( this.checkValidity && !this.checkValidity() ) {
            $( this ).find( ":invalid" ).first().focus();
            event.preventDefault();
        }
    });
};
$( "form" ).each( createAllErrors );