Question

I have a form with several different fieldsets. I have some jQuery that displays the field sets to the users one at a time. For browsers that support HTML5 validation, I’d love to make use of it. However, I need to do it on my terms. I’m using JQuery.

When a user clicks a JS Link to move to the next fieldset, I need the validation to happen on the current fieldset and block the user from moving forward if there is issues.

Ideally, as the user loses focus on an element, validation will occur.

Currently have novalidate going and using jQuery. Would prefer to use the native method. 🙂

Answer 1

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.