Jquery Validation And Update Panel Together

Question

I m trying to use jquery validation plugin but my form is in update panel. So even after applying the validation on submit the form it validates and shows the required message for hardly 2 seconds and then submits the form.
What is the workaround for this?

I have tried this also.

<asp:UpdatePanel ID="AddUserPanel" runat="server"
             ChildrenAsTriggers="false"
             UpdateMode="Conditional">

But this also doesn't seem to help.

Answer 1

If your using a script manager you need the l33t code below:

  $(function () {
 //Code that runs before update panel is fired.

        //Listen for update panel
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        //Re-initialize jquery after an auto post back.
        function EndRequestHandler(sender, args) {
            //Do work after update panel fires.
        } 
    });

So basically you have duplicate code, code outside of the EndRequestHandler() and inside it.

Answer 2

You need to return false and stop event bubbling on the onsubmit, something like this:

$("form").submit(function (e) {
  e.preventDefault();
  return(false);
});

However I don't know anything about ASP, so I don't know if that will help in this particular case.

Perhaps you need to use .live or reattach the handler after the content in this panel is loaded in, so the onsubmit events are bound to it?

Answer 3

Asp.net WebForms uses the __doPostback() function that submits your form.

This is what I would do:

1. Check form submit execution to see whether things works as expected so validation happens first (which I'm pretty sure it does because you do get those messages up) and check the code of each individual part.

2. If validation doesn't prevent default event execution (bubbling) by either returning false of calling preventDefault() or both, then it should be changed to work sufficiently with Asp.net WebForms.

3. If everything seems to be fine on the validation front, you should change your __doPostback() function. It does sound hackish yes, but sometimes things like this have to be done. Copy existing code and add additional checking. Nothing to worry.

Also check this Stackoverflow question.

Oh hell. Just do a Google search on this and include stackoverflow results only: jQuery validation webforms site:stackoverflow.com

Answer 4

If I remember correctly, you can use a regular button instead of the asp:button which will not cause a postback. If this is the case, then you can use JavaScript to update the UpdatePanel.