Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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();
    }
share|improve this question
I managed to sort it. For anybody else who runs into an issue like this i did the following (added the onkeyup and onfocusout properties to false to stop validation from triggering on these actions {below submitHandler}). To make it work in both FireFox and IE7,8 and 9, in the setFocus function get the element via the 'document.getElementById' and the jquery '.focus()' methods. Using this seems to accept a string input fine from the jquery validation plugin and searches the DOM correctly. Hope this is of some help to somebody :). – Tay Nov 7 '12 at 14:36

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.