Question

So I have a form, but I don’t need to be submitting the information to the server just yet… What I need, is to just run the fields through the HTML5 built-in validation conditions (such as email, etc.), and if true, just execute a specific function…

So far, I’ve come up with this…

function checkform()
{
    var /* all the elements in the form here */

    if (inputElement.validity.valid == 'false')
    {
        /* Submit the form, 
        this will cause a validation error, 
        and HTML5 will save the day... */
    } else
    {
        navigateNextStep();
    }
}

That’s the logic I’ve come up with so far, and its a little backhanded because I’m submitting KNOWING that there’s an invalid value, hence triggering the validation prompts…

My only problem with the above logic, is that I have about, 7-8 input elements, and I find the option of doing the following rather, ‘dirty’:

var inputs = document.getElementsByTagName("INPUT");
if (!inputs[0].validity.valid && !inputs[1].validity.valid && ...)

Ideas?

Answer 1

You can just call formEl.checkValidity()… This will return a boolean indicating whether or not the whole form is valid, and throw appropriate invalid events otherwise.

The spec

A brief JSFiddle to play with

I’m not sure how you’re expecting submitting the form to trigger the browser’s validation UI, though. Calling formEl.submit() seems to result in a submission regardless of the validation state. This is noted at the bottom of The H5F project page, which says:

Safari 5, Chrome 4-6 and Opera 9.6+ all block form submission until all form control validation
constraints are met.

Opera 9.6+ upon form submission will focus to the first invalid field
and bring up a UI block indicating
that it is invalid.

Safari 5.0.1, and Chrome 7 have removed form submission blocking if a
form is invalid, most likely due to
legacy forms now not submitting on
older sites.