Question

在我的jquery中我有这个：

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

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

e.preventDefault（）;

等待提交，直到我进行额外的数据验证，以及我使用bootstrap sweet警告进行其他检查。

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

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

Answer 1

我很惊讶地发现表单checkValidity method没有这样做（它做其他事情，例如让浏览器执行validity checks并相应地设置状态。）

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

E.g：

$(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，因为它们甚至不允许取消表单提交，并且代码在Firefox中无法正常运行一个Stack Snippet; 使用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();
});

Answer 2

使用Submit事件而不是单击

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

Answer 3

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

完成检查验证后设置标记
而不是阻止默认行为检查中的set标志您的click功能

jquery阻止默认和浏览器验证

3 个答案: