How to force a html5 form validation without submitting it via jQuery

To check whether a certain field is valid, use:

$('#myField')[0].checkValidity(); // returns true|false

To check if the form is valid, use:

$('#myForm')[0].checkValidity(); // returns true|false

If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:

var $myForm = $('#myForm');

if (!$myForm[0].checkValidity()) {
    // If the form is invalid, submit it. The form won't actually submit;
    // this will just cause the browser to display the native HTML5 error messages.
    $myForm.find(':submit').click();
}

Keep in mind that, HTML5 validation is not supported in all browsers till now.

Leave a Comment