如果inputElement.validity.valid ==为假，如何显示HTML5验证？

Question

所以我有一个表单，但我还不需要将信息提交给服务器...我需要的是通过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 && ...)

想法？

Answer 1

你可以打电话给formEl.checkValidity()..。这将返回一个布尔值，指示整个表单是否有效，否则将引发适当的invalid事件。

The spec

A brief JSFiddle to play with

不过，我不确定您希望如何提交表单来触发浏览器的验证UI。无论验证状态如何，调用formEl.submit()似乎都会导致提交。这记录在The H5F project page的底部，上面写着：

OperaSafari5、Chrome4-6和

9.6+都会阻止表单提交，直到满足所有表单控件验证约束。

提交表单时，Opera 9.6+将聚焦于第一个无效字段，并显示一个UI块，指示该字段无效。

Safari 5.0.1和Chrome7已经移除了表单无效时的表单提交阻止，这很可能是由于遗留表单现在不能在旧网站上提交。

Answer 2

好的，这很尴尬……多亏了Domenic和Google，我找到了另一个解决方案……

我运行了一个for循环，通过imputElement.validity.valid方法检查每个输入元素是否有效，该方法返回一个布尔值...

对于每个有效的元素，我将一个变量加1，并在循环中包含一个条件语句，以检查该变量是否增加到足以执行导航函数...

如果有一个无效的字段，If语句将永远不会执行，并且(这里是有趣的部分)浏览器无论如何都会验证这些字段，弹出哪些字段已经损坏，需要用户更正……:-)

For循环...

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

if (hg==8)
    skimregform();

Answer 3

即使设置了event.preventDefault()函数，也可以通过编程方式触发对表单中每个字段的检查。

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