Page still Postbacks after JQuery validation fail

Question

I have an ASP.Net web form page on which I've applied JQuery validation. The problem is, when the validation fails, the page still postbacks. I have two textboxes which have required : true validation. This is my submit button code :

<button id="btnSubmit" class="btn btn-info" type="button" onserverclick="btnSubmit_Click" onclick="checkValidate(event);" causesvalidation="true" 
runat="server"> 
<i class="icon-ok bigger-110"></i>Submit 
</button>

This is JQuery's validate method :

$(function() { 
            $('#validationForm').validate({ 

             errorElement:'span',
             errorClass: 'help-inline', 
             focusInvalid: false, 
                      //debugger;
             rules: { 
             <%=txtName.UniqueID %>: { 
             required: true 
            }, 
        <%=txtDescription.UniqueID %>: { 
        required: true 
        } 
      }, 

        messages: { 
        <%=txtName.UniqueID %>: { 
        required: "Please provide a valid name." 
        }, 
        <%=txtDescription.UniqueID %>: { 
        required: "Please specify a description."
        }, 
      }, 
        invalidHandler: function (event, validator) { //display error alert on form submit   
                        $('.alert-error', $('.login-form')).show();
                    },

                    highlight: function (e) {
                        $(e).closest('.control-group').removeClass('info').addClass('error');
                    },

                    success: function (e) {
                        $(e).closest('.control-group').removeClass('error').addClass('info');
                        $(e).remove();
                    },

                    submitHandler: function (form) {
                    },
                    invalidHandler: function (form) {
                    }
                });
                })

And this is the method which checks for the validation on button click:

function checkValidate(evt) { 
// Validate the form and retain the result. // 
var isValid = $('#validationForm').valid(); 
// // If the form didn't validate, prevent the form submission. //
//debugger; 
if (!isValid){ 
evt.preventDefault(); 
evt.stopPropagation(); 
return false; }
else 
return true; 
}

This is the rendered HTML of my button :

<button onclick="checkValidate(event); __doPostBack('ctl00$ContentPlaceHolder1$btnSubmit','')" id="ContentPlaceHolder1_btnSubmit" class="btn btn-info" type="button"> 
<i class="icon-ok bigger-110"></i>Submit 
</button>

Also, I've put the debugger in the checkValidate() method, & found that everything is working fine there, but after the end of method, the page postbacks. I ran the JQuery valid() method on browser's console, and it's also running fine, returning the correct values.
When Textbox(es) are empty : When Textboxes are filled :

Where exactly is the problem? How can I stop page from postback when validation fails?

prevent by default the submit on the click of the button and than if the validation is succesful use the submit() function — madalinivascu, Apr 27 '15 at 08:28
the type of my button is `type="button"` and not `type="submit"`. Moreover I've also wrote `evt.preventDefault(); ` `evt.stopPropagation(); ` when validation returns false. This should let button stop from submitting, but this isn't the case :/ @madalinivascu — sohaiby, Apr 27 '15 at 08:33
You haven't shown the source for the form, though maybe this question might help http://stackoverflow.com/q/3591634/1741542 — Olaf Dietsche, Apr 27 '15 at 10:00

score 1 · Answer 1 · answered Apr 27 '15 at 08:40

1

use

onclick="return checkValidate(event);"

answered Apr 27 '15 at 08:40

Ghanshyam Lakhani

362
3
21

I have done this but now the page is not submitting at all.. even if the validation returns true. :/ – sohaiby Apr 27 '15 at 09:19

Chris · Answer 2 · 2015-04-27T09:45:48.317

1

You could do this:

onclick="if (checkValidate(event)) {YOURMETHODTOEXECUTE_ON_SUCCESS()}"

Obviously, you'll need to refactor your code a little bit, but it should work this way.

Based on the comment, in that case you can use this:

onclick="return !!yourFunction()"

No need to change your onserverclick=""

edited Apr 27 '15 at 09:45

answered Apr 27 '15 at 09:37

Chris

5,040
3
20
24

The method I want to execute on success is the server side ButtonClick method, which I've already mentioned as`onserverclick="btnSubmit_Click"` So I can't write it on client side's click event – sohaiby Apr 27 '15 at 09:41
`onclick="return !!yourFunction()"` What is yourFunction here? The JQuery validation function or my server side function? @chris – sohaiby Apr 27 '15 at 11:26
sorry, that should have been your validation function – Chris Apr 27 '15 at 12:04

score 0 · Accepted Answer · answered Apr 27 '15 at 11:24

I've done it finally. I've just add onsubmit property on my form and set the jquery valid method in it.
This was my form code eariler

<form class="form-horizontal" id="validationForm" method="post" runat="server">

And this is after I changed it.

<form class="form-horizontal" id="validationForm" onsubmit="return $('#validationForm').valid()" method="post" runat="server">

Thought I still have no idea that why it's triggering postback even when the validation returning false

Page still Postbacks after JQuery validation fail

3 Answers3

Linked