javascript – 如果inputElement.validity.valid == false,如何显示HTML5验证？

所以我有一个表单,但我还不需要将信息提交给服务器……我需要的是通过 HTML5内置验证条件(例如电子邮件等)运行字段. ),如果是真的,只需执行一个特定的功能……

到目前为止,我已经想到了……

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();
    }
}

这是我到目前为止所提出的逻辑,而且有点后悔,因为我提交知道有一个无效值,因此触发验证提示……

我对上述逻辑的唯一问题是,我有大约7-8个输入元素,并且我发现执行以下操作的选项,而不是’脏’：

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

想法？

解决方法

你可以调用formEl.checkValidity()…这将返回一个布尔值,指示整个表单是否有效,否则抛出适当的无效事件.

The spec

A brief JSFiddle to play with

不过,我不确定你是如何期望提交表单来触发浏览器的验证用户界面的.无论验证状态如何,调用formEl.submit()似乎都会导致提交.这在The H5F project page的底部注明,其中说：

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.

javascript – 如果inputElement.validity.valid == false,如何显示HTML5验证？

解决方法

相关文章