c# - jQuery Validation with ASP.NET C# Web Forms

Question

I'm having a bit of an awkward problem with jquery validation (which is brilliant) and asp.net web forms. I presume its an issue with how the forms are used in this framework but anyway here's the issue.

1. I have a page which has a number of fields for an employee to fill out, when he/she submits/saves the record (asp.net button control) the validation rules trigger and display relative errors if present (seems to work, rules need work but that irrelevant for the minute).
2. The validations trigger correctly and list at the bottom of the screen, however if i click anywhere on the screen the jQuery seems to fire again and displays only the first error (same with any sort of key press/minimization of the screen). When that error is corrected the next in the list appears and so on...

Note:

My form is in the master page which has a content placeholder within it and the .net version is 3.5 (unfortunately limited by the servers I'm working on).

If anybody could help, that would be great :D.

    $(document).ready(function () {
        $('.txt')
        .focus(function () { 
            $('.txt').removeClass('focused');
            $(this).addClass('focused'); 
        })
        .blur(function () { 
            $(this).removeClass('focused'); 
        });


        //Fire validation events
        $("#aspnetForm").validate({
            //Setting validations rules like, Required, Minimum or Maximum Length, Data Type etc.
            rules:
            {
                //Set name of tag to validate: Name = UniqueID
                <%= txtPointCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtPointName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtPointLocalName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtPortCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtCountryCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtCountryName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtAreaName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtRegionName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
                <%= txtContinentName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 }
            },
            //Contextual error messages for each selected field
            messages:
            {
                <%= txtPointCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtPointName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtPointLocalName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtPortCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtCountryCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtCountryName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtAreaName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtRegionName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
                <%= txtContinentName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters."
            },

            //A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, 
            //called in the context of the validator object.
            showErrors: function (errorMap, errorList)
            {
                var messages = "";
                var errorCount = 0;

                //Error builder
                $.each(errorList, function (index, value) {
                    var id = $(value.element).attr('id');
                    var elementName = $(value.element).attr('name').split('txt'); //Strip out UniqueID obfuscation

                    messages += "<span>" + (index + 1) + ". | <a noref title=\"Click to view field\" onClick=\"setFocus('" + id + "');\">[" + elementName[1] + "]</a> | " + value.message + "</span><br/>";
                    errorCount++;
                });

                messages = "<div class='errorWrapper'><hr><h1>Please correct the following " + errorCount + " errors:</h1><br /><br />" + messages + "</div>";

                //Display error summary with slide animation
                $('#summary-validation').html(messages);
                $('#summary-validation').show("fast");
            },

            //If all validations are successfully validate then execute submitHandler function
            submitHandler: function ()
            {
                $('#summary-validation').empty();
                //alert("All fields are valid!");
                $("#aspnetForm").submit();
            },
            onkeyup: false, //Stops validation refresh on occurances of certain key presses
            onfocusout: false //Stops validation refresh when element loses focus
        });
        //-------------------------------------------------------------------------------
    });
    //If validation errors are occured in any field, it will display field name with link, clicking on link it will set focus of perticular field.            
    function setFocus(ele)
    {
        document.getElementById(ele).focus();
        //$(ele).focus();
    }