jquery 阻止默认验证和浏览器验证

Question

在我的 jquery 中我有这个：

$(this).click(function(e){
  e.preventDefault();
... other stuff...

我做了一些额外的验证工作，然后提交了一份表格。我需要这个

e.preventDefault();

等待提交，直到我完成了额外的数据验证，并且我还使用引导程序甜蜜警报进行了一些其他检查。

但使用此方法会阻止对带有 required="required" 标记的字段进行标准浏览器验证。这是一个“视觉”的遗憾。

有没有办法防止 jquery 提交而不破坏浏览器验证？

Answer 1

我惊讶地发现表单的checkValidity方法并没有执行此操作（它执行其他操作，例如使浏览器执行其有效性检查并相应地设置状态）。

某些浏览器（包括 Chrome 和 Firefox）支持reportValidity，它会执行提交时的操作，因此您可以检测是否支持并在支持时使用它：

例如：

$(this).click(function(e) {
    e.preventDefault();
    if (this.form.reportValidity) {  // <===
        this.form.checkValidity();   // <===
    }                                // <===
    // ...
});

...如果我假设您单击的内容在表单内，因此具有引用其所在表单的属性；form如果没有，请替换this.form为找到该表单的代码，例如：

var form = $("selector-for-the-form")[0]; // Note getting the raw element
if (form.reportValidity) {
    form.reportValidity();
}

示例（jsFiddle 上的实时复制）（我没有使用 Stack Snippets，因为它们甚至不允许取消的表单提交，并且代码在 Stack Snippet 中的 Firefox 上无法正常工作；它确实适用于 jsFiddle 上取消的表单提交）：

HTML：

$(this).click(function(e) {
    e.preventDefault();
    if (this.form.reportValidity) {  // <===
        this.form.checkValidity();   // <===
    }                                // <===
    // ...
});

JavaScript：

var form = $("selector-for-the-form")[0]; // Note getting the raw element
if (form.reportValidity) {
    form.reportValidity();
}