Question

$("form").validate({
    submitHandler: function(form) {
         form.submit();
    }
});
$(document).on("submit", "form", function() {
    alert("submit");
});

http://jsfiddle.net/mayko/g1715wqn/

为什么警报永远不会被解雇？
我怎样才能让它发挥作用？

更新

有趣的是，这有效：

$("form").on("submit", function() {
    alert("does work");
});

http://jsfiddle.net/mayko/g1715wqn/5/

@ Sparky：我正在开发一个放弃页面对话框插件。因此需要在页面上列出所有表单的实际表单提交（带或不带验证器）。这些表单也可以异步加载。我认为$（文件）.on（“提交”，“形式”，功能）;似乎是值得倾听的事件。

Answer 1

您没有理由同时使用该插件提供的submitHandler回调函数和外部submit事件处理程序。无论您是什么这样做可以轻松地包含在这两个处理程序中的一个中。（您还没有解释您最终试图通过这些处理程序实现的目标。）

引用OP ：

＆＃34;为什么警报永远不会被解雇？＆＃34;

submitHandler回调函数会阻止表单的默认submit事件，例如，您可以使用ajax代替。这就是您的外部submit事件处理程序永远不会触发的原因。

在您的情况下，submitHandler回调完全是多余的，因为其中包含的代码也恰好是插件的默认值...

submitHandler: function(form) {
    form.submit(); // this is the default
}

您可以删除上面的选项，然后启动自定义事件处理程序。但是，在使用此插件时，这不一定是在提交事件上触发某些代码的最正确方法。

引用OP ：

＆＃34;我如何才能使其发挥作用？＆＃34;

无论您正在计划使用此外部submit事件处理程序，我建议您在提供的submitHandler回调方法中处理它。（这就是为什么它可供你使用。）

应该如何做......

$("form").validate({
    submitHandler: function(form) {
        alert("submit");
        form.submit();
    }
});

（如果使用.ajax()提交表单，您可以删除form.submit()行并将其替换为return false。）

＆＃13;

$("form").validate({
  submitHandler: function(form) {
    alert("submit");
    form.submit();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>

<form method="POST">
  <input type="text" required />
  <br />
  <button type="submit" class="btn">Submit</button>
</form>

＆＃13;

Answer 2

由于您使用了submtHandler选项，验证程序框架将阻止默认操作并停止事件传播，这就是委托提交处理程序无法正常工作的原因。

所以一种可能的解决方案是不使用提交处理程序....

＆＃13;

$("form").validate({});
$(document).on("submit", "form", function() {
  alert("submit");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<form method="POST" novalidate>
  <input type="text" required />
  <br />
  <button type="submit" class="btn">Submit</button>
</form>

＆＃13;

Answer 3

工作JsFiddle

删除submtHandler

$("form").validate({});
$(document).on("submit", "form", function () {
    alert("submit");
});

Answer 4

我的工作解决方案，如果我们要委托动态表单并与validate插件一起使用：

$('#parent').on('submit', '#child', function(e) {
   e.preventDefault()
      
   $(this).validate({
    rules:{
       // validate rules 
    },
    submitHandler: function(form) {
       // do ajax call
    }
   })
   
   $(this).submit()
})

Answer 5

更改

            <button type="submit" class="btn">Submit</button>

到

            <input type="submit" class="btn" value="Submit"/>

jQuery验证插件 - 委托表单提交事件未触发

5 个答案: