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

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

Safari 5，Chrome 4-6和Opera 9.6+都会阻止表单提交，直到所有表单控件验证为止   约束得到满足。

Opera表单提交后的9.6+将重点关注第一个无效字段   并显示一个UI块指示   这是无效的。

Safari 5.0.1和Chrome 7已删除表单提交阻止，如果a   表格无效，很可能是由于   遗留表格现在没有提交   旧网站。

Answer 2

好的，所以这很尴尬......感谢Domenic，以及很好的Google，我遇到了另一种解决方案......

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

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

如果有一个无效字段，那么if语句将永远不会执行，并且（这是有趣的部分）浏览器无论如何都会验证字段，弹出说明哪些字段被破坏并需要用户更正...： - ）< / p>

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

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

3 个答案: