Question

我正在尝试执行jQuery 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");
                        }
                    });
 });

按钮代码如下： -

 <input id="insertstd" type="submit" name="btnSubmit" value="Submit" />

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

所以我希望它首先执行验证，然后运行$("#insertstd").click函数。

Answer 1

引用标题：

“如何在按钮上单击”
使用jQuery Validation插件

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

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

根据文件：

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() ，您可以将其放在jQuery Validate插件提供的submitHandler回调选项中。

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

1 个答案: