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

【问题标题】：jquery prevent default and browser validationjquery 阻止默认和浏览器验证
【发布时间】：2017-01-10 11:36:35
【问题描述】：

在我的 jquery 中我有这个：

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

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

e.preventDefault();

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

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

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

【问题讨论】：

jQuery 没有任何默认验证。您需要先查看您正在使用的 Bootstrap 框架，了解它们是如何构建验证的。在 e.preventDefault() 之后，您将调用自己的验证代码。如果您需要框架的默认行为不进行验证，请删除“required="required"”标签
@zerohero：问题是关于浏览器（不是 jQuery）处理的 HTML5 有效性约束；在元素上查看有关required="required" 的信息。

标签： javascript jquery validation

【解决方案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) （我没有使用堆栈片段，因为它们甚至不允许取消表单提交，并且代码在堆栈中的 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();
});

【讨论】：

谢谢！ this.form.reportValidity();解决了我的问题！！谢谢！！

【解决方案2】：

使用提交事件而不是点击

$(this).on('submit', function(e){
  e.preventDefault();
... other stuff...

【讨论】：

【解决方案3】：

不是很清楚问题是什么，但据我所知，您可以：

完成检查验证后设置一个标志
而不是阻止默认行为检查设置标志你的click 函数

【讨论】：