Jquery Validation And Update Panel Together

I am Using jQuery Validation Plugin 1.8.1.It's working perfectly as expected but the problem started when I added an update panel in one on my content pages.Here I have added

    $(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) {
        Validate();
    } 
});

In side my update Panel to call my Validate method at every Partial Post Back which is written in the Master Page like this

    <script type="text/javascript">

    $().ready(function() {

    Validate();

    });
    </script>

    <script type="text/javascript">
    fun开发者_如何学运维ction Validate();
    {
    var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
    errorContainer: container,
    errorLabelContainer: $("ul", container),
    wrapper: 'li',
    meta: "validate"            
});  
    }
    </script>         

Just by adding this Update Panel I can see when I press the Submit button form it validates and shows the required message for hardly 2 seconds and then submits the form. What is the workaround for this?

Subscribe for the initializeRequest event and check in that event handler is form valid. If not the cancel postback:

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(instance_initializeRequest);

function instance_initializeRequest(sender, args) {
        if (!$("#form2").validate().form()) {
            args.set_cancel(true);
        }
    }

I'm not sure I got the point, but IMO you should abort the postback in case of validation error:

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);

function InitializeRequest(sender, args)
{
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (! Validate()) {
        prm.abortPostBack();
    }    
}

Here by adding this code my problem of getting page posted back in spite of having validation error is solved but it introduced a new one, now by selecting the master dropdown list my child dropdown is not populating I have checked from code behind the targeted method to populate the child dropdown is not firing at all….

  <asp:UpdatePanel ID="updRole" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <script type="text/javascript" >
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest    (instance_initializeRequest);
        function instance_initializeRequest(sender, args) {
            if (!Validator())
             {                
                args.set_cancel(true);
             } 
          } 
       </script>
    </ContentTemplate>
    </asp:UpdatePanel>

This piece of code I have in master page where the validator() function is fired in .ready() event fired by default but the problem was by adding update panel in any content page is method is firing(Validation error is also showing for 2 sec) but page is getting posted back .

    <script type="text/javascript">
        $.validator.setDefaults({
        invalidHandler: function (form, validator) {    
    alert(“hi”);
        }
    });

    $().ready(function () {
        Validator();         

    });

    function Validator() {

        var container = $('div.container');
        // validate the form when it is submitted
        var validator = $("#form1").validate({
            errorContainer: container,
            errorLabelContainer: $("ul", container),
            wrapper: 'li',
            meta: "validate"
        });
    }