你能在元素上调用 checkValidity() <form> 吗？

Question

我查看了Constraint Validation API，发现一些在线示例代码似乎调用了<form>元素上的checkValidity()：

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

但我自己尝试过，但没有成功。我在其他地方也找不到任何关于这一点的说法。据我估计，它不能在<form>上调用。有人能帮我吗？

Answer 1

您使用的是submit，但如果您使用input，则没有submit事件。您可以使用input或paste事件处理程序输入

window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('input', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);

<form>
<input type='email' class='needs-validation'>
<button type='submit'>Submit</button>
</form>

Answer 2

实际上有很多方法可以对此进行点选。您似乎已经编写了一个自调用的JS函数。在另一种简单的方式中，您可以简单地在标记中编写onsubmit事件属性并编写函数名称。

例如

<form onsubmit="return checkValidity()">
//...rest stuff
</form>

根据函数返回的结果，根据表单将被提交或停止提交的条件，是true还是false。