如果inputElement.validity.valid == false,如何显示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否则抛出适当的事件.

规范

一个简短的JSFiddle玩

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

Safari 5,Chrome 4-6和Opera 9.6+都会阻止表单提交,直到满足所有表单控制验证约束.

表单提交后的Opera 9.6+将集中于第一个无效字段并显示一个UI块,表明它无效.

Safari 5.0.1和Chrome 7已删除表单提交阻止,如果表单无效,很可能是由于旧版网站现在没有提交旧版表单.