CODEWITHSUNDEEP
jqueryjquery-validate
user3004110
user3004110

Reputation: 969

How to use jQuery Validation plugin on button click

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");
                        }
                    });
 });

The button code is following:-

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

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.

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

Upvotes: 0

Views: 4519

Answers (1)

Sparky
Sparky

Reputation: 98718

Quote Title:

"How to use jQuery Validation plugin on button 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.

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.

As per documentation:

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
        }
    });

});

Quote OP:

"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."

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.

Upvotes: 1

Related Questions