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

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 &开发者_运维技巧amp;& !inputs[1].validity.valid && ...)

Ideas?

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.

Ok, so this is awkward... Thanks to Domenic, and good ol' Google, I came across an alternative solution...

I ran a for loop, checking if each of the input elements were valid or not through the imputElement.validity.valid method, which returned a boolean value...

For every element that was valid, I incremented a variable by 1, and included a conditional statement in the loop to check if the variable had been incremented enough to execute the navigation function...

If there was an invalid field, the if statement would never execute, and (here's the fun part) the browser would validate the fields anyways, pop up saying which fields were broken and needed user correction... :-)

The For Loop...

for (i=0;i<8;i++)
{
    if (inputs[i].validity.valid)
        hg++;
}

if (hg==8)
    skimregform();

You can programmatically trigger the checking of each field in your form, even if you set event.preventDefault() function.

  document.forms["form_id_name"].reportValidity();