如何检测尝试提交的无效 HTML 表单？答案

【问题标题】：How do I detect an attempted submission of invalid HTML forms?如何检测尝试提交的无效 HTML 表单？
【发布时间】：2019-08-28 05:20:25
【问题描述】：

使用HTML5 form validation 时，表单中的输入值无效将停止提交该表单。如何检测用户尝试提交失败的表单？当提交因验证失败而停止时，表单的onsubmit 处理程序不会触发。

我目前正在提交按钮上监听keypress 和click 事件以检测提交尝试。有没有更好的方法来检测表单提交失败？

【问题讨论】：

和onsubmit一样，然后如果有无效的条目就返回false？
您有浏览器限制吗？ IE10 对 HTML5 验证很好，但旧版本有点欠缺。
喜欢 oninvalid 吗？ O.o ?
@AvnerSolomon 是的，我认为oninvalid 非常接近 OP 正在寻找的内容。不过，oninvalid 似乎只适用于输入，而不适用于表单本身。当然，您可以在每个输入上放置一个oninvalid 处理程序——这似乎是一个有效的（虽然有些脆弱）的解决方案。
@apsillers ...即使您通过javascript进行操作，它也不会像那样工作。有效性属性/对象仅按输入定义。您所能做的就是在按下提交按钮时启动一个函数 onclick 并检查每个元素。

标签： javascript html forms dom-events html5-validation

【解决方案1】：

解决此问题的一种简单方法是为表单中的每个输入添加一个事件侦听器，以查看它何时被阻止提交。 'invalid' 事件应该做你需要的一切。

示例

Array.prototype.slice.call(document.querySelectorAll("[required]")).forEach(function(input){
                input.addEventListener('invalid',function(e){
                    //Your input is invalid!    
                })
            });

【讨论】：

【解决方案2】：

以上面的@Titulus' 代码为基础，下面是我在 jQuery 中的做法；如果需要，您可以根据本地事件进行调整。

$('form-selector').on('submit', function(event) {
  // Don't do anything if constraint validation isn't supported by the browser.
  if (
    !('checkValidity' in this) ||
    // In the unlikely case this is a property but not actually a function.
    // Hypothetically, a botched polyfill could do this; it pays to be careful
    // and build resilient code.
    typeof this.checkValidity !== 'function'
  ) {
    return;
  }

  if (this.checkValidity() === true) {
    // Valid values code.
  } else {
    // Invalid values code.

    // Leave this until the last possible moment in the handler in case there's
    // an error in any of the handler code to reduce the chances of a broken
    // form where the submit does nothing. If an exception is thrown before
    // this, the browser shouldn't get this far, (hopefully) allowing the basic
    // form to still work.
    event.preventDefault();
  }
});

// Tell the browser to not validate automatically, as that would prevent submit
// from being triggered. We prevent the submission above if form doesn't pass
// validation. This is here in case there's an error in the preceding code, so
// this (hopefully) doesn't get applied in that case and browser validation
// takes place as a fallback.
this.noValidate = true;

【讨论】：

【解决方案3】：

我建议你使用noValidate 属性。您可以关闭默认验证，并在onsubmit 方法中手动运行它

var form = document.getElementById("myForm");
form.noValidate = true; // turn off default validation

form.onsubmit = function(e) {
  e.preventDefault(); // preventing default behaviour
  this.reportValidity(); // run native validation manually

  // runs default behaviour (submitting) in case of validation success
  if (this.checkValidity()) return form.submit();

  alert('invalid'); // your code goes here
}

你可以在这里查看：https://jsfiddle.net/titulus_desiderio/Laon29f3/

【讨论】：