单击按钮时如何使用jQuery Validation插件 [英] How to use jQuery Validation plugin on button click

问题描述

我正在尝试执行jQuery Validation插件，但出现了一些小问题.在同一个按钮上，我必须首先执行验证，当验证成功时，它将通过获取此按钮的ID来执行其他一些jQuery代码.例如，查看下面的代码.

I am trying to execute a jQuery Validation plugin but getting a little issue. On the same button I have to first perform validation, and when the validation successful it execute some other jQuery code by getting the id of this button. for example view the code below.

    $(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"时，它将执行验证.

So when I click the above button it directly read the $("#insertstd").click function but does not start validation, and when I remove the id="insertstd" from button then it perform validation.

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

So I want that it should first perform validation and then run $("#insertstd").click function.

推荐答案

引用标题:

如何在单击按钮时使用jQuery验证插件"

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

Answer: You don't need to do anything because the button's click event is already captured automatically by the plugin and then validation is triggered.

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

In other words, the solution is to remove your entire click handler function and put the ajax() inside of the submitHandler option of the .validate() method.

根据文档:

submitHandler:用于在表单有效时处理实际提交的回调.获取表单作为唯一参数.替换默认的提交. 验证后通过Ajax提交表单的正确位置 .

submitHandler: Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

$(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"时，它将执行验证."

"So when I click the above button it directly read the $("#insertstd").click function but does not start validation, and when I remove the id="insertstd" from button then it perform validation."

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

That's because your click handler is interfering with the submit handler already built into the plugin. When you remove the id from the button, you stop using your click handler and allow the plugin to validate. Since you want to use ajax() after the form passes validation, you would put it inside the submitHandler callback option that is provided by the jQuery Validate plugin.

这篇关于单击按钮时如何使用jQuery Validation插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！