如何在按钮单击时使用jQuery Validation插件

我试图执行一个jQuery Validation插件，但得到一个小问题。 在同一个按钮上我必须先执行validation，当validation成功时，它会通过获取此按钮的id来执行其他一些jQuery代码。 例如，查看下面的代码。

$(function () { $("#form-insert").validate({ rules: { tbRollNo: "required" }, messages: { tbRollNo: "Required Field" } }); $("#insertstd").click(function (e) { e.preventDefault(); debugger $.ajax({ type: 'POST', url: '/Home/student', data: { Insert: true, RollNo: $('#tbRollNo').val(), Title: $('#tbTitle').val(), }, success: function () { }, error: function () { alert("Oh noes"); } }); }); 

按钮代码如下： –

因此，当我单击上面的按钮时，它会直接读取$("#insertstd").click函数但不启动validation，当我从按钮中删除id="insertstd" ，它会执行validation。

所以我希望它首先执行validation，然后运行$("#insertstd").clickfunction。

Answer 1

引用标题：

“如何在按钮点击时使用jQuery Validation插件”

答 ：您无需执行任何操作，因为插件会自动捕获按钮的click事件，然后触发validation。

换句话说，解决方案是删除整个click处理函数，并将ajax()放在submitHandler .validate()方法的submitHandler选项中。

根据文件：

submitHandler ：在表单有效时回调处理实际提交。 获取表单作为唯一参数。 替换默认提交。 经validation后，通过Ajax提交表单的正确位置 。

 $(function () { $("#form-insert").validate({ rules: { tbRollNo: "required" }, messages: { tbRollNo: "Required Field" }, submitHandler: function(form) { // your ajax would go here. $.ajax({ // your ajax options .... }); return false; // extra insurance preventing the default form action } }); }); 

---

引用OP：

“所以当我点击上面的按钮时，它会直接读取$("#insertstd").clickfunction但不会启动validation，当我从按钮中删除id="insertstd" ，它会执行validation。”

那是因为你的click处理程序干扰了插件中已经内置的submit处理程序。 从按钮中删除id ，您将停止使用click处理程序并允许插件进行validation。 由于您希望在表单通过validation后使用ajax() ，因此您可以将其放在jQuery Validate插件提供的submitHandler回调选项中。