我正在尝试执行 jQuery 验证插件，但遇到了一些问题。在同一个按钮上，我必须首先执行验证，当验证成功时，它通过获取该按钮的 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");
}
});
});
按钮代码如下：-
<input id="insertstd" type="submit" name="btnSubmit" value="Submit" />
所以当我点击上面的按钮时它会直接读取$("#insertstd").click函数但不开始验证，当我删除id="insertstd"从按钮然后它执行验证。
所以我希望它应该首先执行验证然后运行$("#insertstd").click功能。
报价标题：
“如何在按钮单击时使用 jQuery 验证插件”
Answer：您无需执行任何操作，因为该按钮click事件已被插件自动捕获，然后触发验证。
换句话说，解决方案是删除整个click处理函数并把ajax()代替the submitHandler option http://jqueryvalidation.org/validate/#submithandler of the .validate() method.
根据文档：
submitHandler：表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 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").click函数但不开始验证，当我删除id="insertstd"从按钮然后它执行验证。”
那是因为你的click处理程序正在干扰submit处理程序已内置到插件中。当您删除id从按钮，您停止使用您的click处理程序并允许插件验证。既然你想用ajax() after表单通过验证，您可以将其放入submitHandlerjQuery Validate 插件提供的回调选项。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
