How to use jQuery Validation plugin on button click

Question

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.

Please be more mindful when tagging your questions. The jQuery Validation Engine is not the same plugin as jQuery Validate. — Sparky
– Sparky, Commented Oct 12, 2014 at 1:17

Sparky · Accepted Answer · 2014-10-12 16:22:02Z

1

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.

edited Oct 12, 2014 at 16:22

answered Oct 12, 2014 at 1:16

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3004110 Over a year ago

Thanks for the reply, Yes its working now but i face another little problem that is, when i write e.preventDefault(); under submitHandler: function(form)...., its giving 404 page not found error. How can i avoid this error and use e.preventDefault(), thanks

Sparky Over a year ago

@user3004110, why do you think you need preventDefault there? That's not appropriate in this context.

user3004110 Over a year ago

Sorry for my silly question again because i am new to jquery. Actually i am trying to prevent page to refresh so that is why i used e.preventDefault(). And can you please little explain that why it is not necessary where i wrote it, thanks and appreciate your help.

Sparky Over a year ago

@user3004110, You don't need it because if you simply follow my code, there would be no page refresh. .preventDefault() has absolutely no business within the submitHandler and if you put it there, you're probably breaking something. The plugin automatically handles everything and as long as you're including the submitHandler option, there will be no default form submit (no page refresh). Therefore you must manually put form submission code inside of the submitHandler... in your case, ajax().

Collectives™ on Stack Overflow

How to use jQuery Validation plugin on button click

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related