Javascript 如果 inputElement.validity.valid == false，如何显示 HTML5 验证？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6338885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display HTML5 validation if inputElement.validity.valid == false?
提问by Abhishek
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...
所以我有一个表单，但我还不需要将信息提交到服务器......我需要的是通过 HTML5 内置验证条件（例如电子邮件等）运行字段。 )，如果为真，就执行一个特定的函数...
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':
我对上述逻辑的唯一问题是，我有大约 7-8 个输入元素，我发现可以选择执行以下操作，而不是“脏”：
var inputs = document.getElementsByTagName("INPUT");
if (!inputs[0].validity.valid && !inputs[1].validity.valid && ...)
Ideas?
想法？
回答by Domenic
You can just call formEl.checkValidity()... This will return a boolean indicating whether or not the whole form is valid, and throw appropriate invalidevents otherwise.
你可以只调用formEl.checkValidity()... 这将返回一个布尔值，指示整个表单是否有效，invalid否则抛出适当的事件。
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:
不过，我不确定您希望如何提交表单以触发浏览器的验证 UI。formEl.submit()无论验证状态如何，调用似乎都会导致提交。在H5F 项目页面的底部注明了这一点，其中说：
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.
Safari 5、Chrome 4-6 和 Opera 9.6+ 都阻止表单提交，直到满足所有表单控件验证约束。
Opera 9.6+ 在提交表单时将聚焦到第一个无效字段并显示一个 UI 块，指示它是无效的。
如果表单无效，Safari 5.0.1 和 Chrome 7 已删除表单提交阻止，这很可能是由于旧版表单现在无法在旧网站上提交。
回答by Abhishek
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 循环，通过 imputElement.validity.valid 方法检查每个输入元素是否有效，该方法返回一个布尔值......
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...
对于每个有效元素，我将一个变量增加 1，并在循环中包含一个条件语句以检查变量是否已增加到足以执行导航功能......
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... :-)
如果存在无效字段，则 if 语句将永远不会执行，并且（这是有趣的部分）浏览器无论如何都会验证这些字段，弹出说明哪些字段已损坏并需要用户更正...... :-)
The For Loop...
For 循环...
for (i=0;i<8;i++)
{
if (inputs[i].validity.valid)
hg++;
}
if (hg==8)
skimregform();
回答by Armand
You can programmatically trigger the checking of each field in your form, even if you set event.preventDefault() function.
即使您设置了 event.preventDefault() 函数，您也可以以编程方式触发对表单中每个字段的检查。
document.forms["form_id_name"].reportValidity();
