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

Question

在我的 jquery 中我有这个:

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

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

e.preventDefault();

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

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

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

Answer 1

我惊讶地发现表单的checkValidity method不执行此操作(它执行其他操作，例如使浏览器执行其 validity checks 并相应地设置状态)。

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

例如:

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

...如果我假设您单击的内容在表单内，因此有 the form property指的是它的形式；如果没有，请将 this.form 替换为查找表单的代码，例如:

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

示例 ( live copy on jsFiddle ) (我没有使用 Stack Snippets，因为它们甚至不允许取消的表单提交，并且代码在 Stack 中的 Firefox 上无法正常工作片段；它确实适用于 jsFiddle 上取消的表单提交):

HTML:

<p>Click the button without filling in the field:</p>
<form>
  <label>
    Required field:
    <input type="text" required>
  </label>
  <input type="submit" id="btn" value="Click to validate">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript:

$("#btn").on("click", function(e) {
  e.preventDefault();
  this.form.reportValidity();
});