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

Question

我浏览了一下约束验证应用程序接口，在网上找到了一些似乎在<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>

​

根据函数返回的结果，根据表单将被提交或停止提交的条件，判断是真是假。