Validation Inside jQuery Accordion

I recently uncovered a little issue with using entry controls that use unobtrusive JavaScript validation inside jQuery accordion control.  When an error is shown, the accordion does not resize as it should, thus some controls fall off the accordion surface.  I got some feedback on  ASP.NET forum from Bruce, and wrote a little function that does accordion resizing.  You just need to call the function after the form has been loaded and jQuery initialized.  I wanted to post the code here on my blog as well as forum, mostly for my own benefit.  Yes, I am selfish 🙂

 hookupErrorPlacementAndResize: function () {
    var currentForm = $('form');
    $.each(currentForm, function () {
        var validator = $(this).data('validator');
        var errorPlacement = validator.settings.errorPlacement;
        validator.settings.errorPlacement = function (error, element) {
             if (errorPlacement) {
                   errorPlacement(error, element);
            }
       $('.accordion_class').accordion('resize');
     };
   });
 }

If you have multiple forms, you can always change the code to take form name as a parameter to the function.  All function does is override errorPlacement function used by jQuery validation and hooks up additional code to resize accordions based on class.  You can always change that as well and use names.

Thanks.

2 Comments

Leave a Reply to shah madhuri Cancel reply

Your email address will not be published. Required fields are marked *