最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to display HTML5 validation if inputElement.validity.valid == false? - Stack Overflow

programmeradmin4浏览0评论

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?

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?

Share Improve this question edited Jun 14, 2011 at 5:14 Charles Brunet 23.1k25 gold badges85 silver badges127 bronze badges asked Jun 14, 2011 at 3:55 AbhishekAbhishek 4,34012 gold badges41 silver badges52 bronze badges
Add a comment  | 

3 Answers 3

Reset to default 16

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();
发布评论

评论列表(0)

  1. 暂无评论