Jquery Validation and updatepanel,

Question

     $(document).ready(function () {
        $("#formIsValid").val("false"); 
        $('#form1').validate({
            rules: {
                <%= CmyCd.UniqueID %>: { required:true },
                <%= CmyName.UniqueID %>: { required:true },
            },
            messages: {
            },highlight: function(element, errorClass) {
                $(element).addClass("redBorder");
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass("redBorder");
            },
            submitHandler: function(form){
                $("#formIsValid").val("true");  
            }
        });

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

        function CheckValidationStatus(sender, args) { 
            if($("#formIsValid").val() == "false") { 
                args.set_cancel(true); 
            } 
        }
    });

<input type="hidden" name="formIsValid" id="formIsValid" value="false" />

I had search through the web and create a function to use jQuery validation on asp.net ajax updatepanel, if validate failed, the code work fine, but the issue is, if all the condition are met, I need to click twice to actually submit the form, due to formIsValid onload is false, and I have no idea how to actually fix this, any guide to fix the issue?

Answer 1

        $(document).ready(function () {
        $('#form1').validate({
            rules: {
                <%= CmyCd.UniqueID %>: { required:true },
                <%= CmyName.UniqueID %>: { required:true },
            },
            messages: {
            },highlight: function(element, errorClass) {
                $(element).addClass("redBorder");
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass("redBorder");
            },
        });

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

        function CheckValidationStatus(sender, args) { 
            if ($('#form1').valid()) { 
                args.set_cancel(false); 
            } else{
                args.set_cancel(true); 
            }
        }

Answer 2

All this formIsValid hidden field stuff is totally unnecessary. There is a method already built into the jQuery Validate plugin called .valid() which triggers a validation test and returns a boolean value.

$(document).ready(function () { 

    $('#form1').validate({
        rules: {
            <%= CmyCd.UniqueID %>: { required:true },
            <%= CmyName.UniqueID %>: { required:true },
        },
        messages: {
        },
        highlight: function(element, errorClass) {
            $(element).addClass("redBorder");
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass("redBorder");
        }
    });

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

    function CheckValidationStatus(sender, args) { 
        if ($('#form1').valid()) { 
            args.set_cancel(true); 
        } 
    }

});

Alternatively, you might possibly be able to just use the submitHandler callback function to run your function more directly. (Since the submitHandler is only fired on a valid form, it makes externally testing for validity seem redundant in this case.)