jQuery validation plugin. Validation not working after post back

Question

I have set up validation on a .Net form with the JQuery plugin, everything works on page load, but after a post back the validation stops working.

Then if I empty a requiered field and try to submit, when my .Net validators catch the problem client side, then the live validation on the fields starts working again.

Here is a small code sample which reproduce the problem:

<script language="javascript">
    $(document).ready(function () {
        ValidateElements();
    });

    function ValidateElements() {
            jQuery.validator.messages.required = "   ";
            jQuery.validator.messages.email = "   ";

            var rules = {};
            rules[$("#<%=TxtInvoiceName.ClientID%>").attr("name")] = {
                required: true

            };

            $('form').validate({
                rules: rules,
                success: function (label) {
                },
                errorPlacement: function (label) {

                }

            });

            $("#MainForm").validate().form();
        }
</script>

<style>
    input.error {
     border: 1px solid red;
    }
</style>

<form id="MainForm" runat="server">
<div>
    <asp:TextBox runat="server" ID="TxtInvoiceName" Text="" />
                <asp:RequiredFieldValidator ID="RequiredFieldInvoiceName" runat="server" ErrorMessage=""
                    Display="Dynamic" ControlToValidate="TxtInvoiceName"></asp:RequiredFieldValidator>
                <asp:Label runat="server" ID="LblTxtInvoiceNameValidate" AssociatedControlID="TxtInvoiceName">&nbsp;&nbsp;&nbsp;</asp:Label>
                <asp:Button runat="server" Text="PostBack" OnClick="PostBack"  />
</div>
</form>

Hope someone can point me to what im doing wrong.

Answer 1

Bump.. Dont anyone have any clues what causes this?

Answer 2

I've modified your ValidateElements function a bit, try this:

        function ValidateElements() {
                jQuery.validator.messages.required = "   ";
                jQuery.validator.messages.email = "   ";

                var rules = {};
                rules[$("#<%=TxtInvoiceName.ClientID%>").attr("name")] = {
                    required: true

                };

                var $form = $('#MainForm');
                $form.validate({
                    rules: rules,
                    success: function (label) {
                    },
                    errorPlacement: function (label) {

                    }

                });

                // whenever an input element's blur event fires,
                // revalidate the form. do this because the asp.net
                // validators use this behavior
                $form.find(':input').blur(function() {
                    $form.valid();
                });

                  // revalidate the form on submit.
                  // better approach because it requires less form revalidation
                  // on the client side, but it won't be in "synch" with the
                  // asp.net client side validation
//                $('#<%= Button1.ClientID %>').click(function() {
//                    return $form.valid();
//                });
            }

Answer 3

I tried your suggestion but cannot get it to work. I now found out that the validation plugins onkeyup does not seem to work if the field has a value onload.

Any idears why that is?