How to display HTML5 validation if inputElement.validity.valid == false?

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.