Trigger Standard HTML5 Validation (Form) Without Using Submit Button

Trigger standard HTML5 validation (form) without using submit button?

The accepted answer to this question appears to be what you're looking for.

Short summary: in the event handler for the submit, call event.preventDefault().

Manually Triggering Form Validation using jQuery

You can't trigger the native validation UI (see edit below), but you can easily take advantage of the validation API on arbitrary input elements:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

The first event fires checkValidity on every input element as soon as it loses focus, if the element is invalid then the corresponding event will be fired and trapped by the second event handler. This one sets the focus back to the element, but that could be quite annoying, I assume you have a better solution for notifying about the errors. Here's a working example of my code above.

EDIT: All modern browsers support the reportValidity() method for native HTML5 validation, per this answer.

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.

html5 validation error message without submitting form

There is no way to trigger the native tooltips other than submitting the form.

If the form is valid, prevent it from submitting, and if it's not valid, just submit it, and the native HTML5 validation will happen, but the form won't be submitted anyway.

You are preventing the default action in both conditions, so the validation never happens, do it like this, and it will

$('#btnContactSubmit').click(function (e) {
    if ($('#aspnetForm')[0].checkValidity()) {
        e.preventDefault();
        if (flag) {
            createListItem();
        }
    }
});

FIDDLE

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.

html5 form get submitted without validation when using jQuery .on() method for button - click event rather than form - submit event. why?

In the first version, submission is entirely synthetic; HTML's natural form submission process is suppressed and everything that occurs is performed by javascript/jQuery.

In the second version, HTML's natural form submission process is allowed to initiate but is then intercepted by javascript/jQuery in the guise an "onsubmit" handler.

HTML5 form validation is, understandably, part of the natural HTML process and (I didn't know this before) must occur prior to the "onsubmit" event.

EDIT:

I can only assume that the HTML5 standard does not specify the order of events in detail and (from what you say) Opera's implementation is different in this regard from the other (validation-capable) browsers.

Out of interest, the accepted answer to this question tells us that "you can't trigger the native validation UI, but you can easily take advantage of the validation API on arbitrary input elements". This offers the possibility of a workaround for Opera's shortcoming, by using your first approach and triggering validation on each form field individually. But hopefully Opera will fix the problem so this is not necessary in the longer term.

---

Related Topics