Question

When a validation error occurs on an input or select field the plugin adds the error class to it so in the css I can have something like:

.error { border: 2px solid red; }

but this doesn’t work on checkboxes and radios due to some browsers not allowing these types of elements to be styled. So for these 2 types of elements I would like the div with the class block that contains them to be given the error class instead. So it will look like this on error:

<div class="block error">
    <input type="checkbox" name="something" class="error" /> Something
</div>

How can the plugin be extended to achieve this?

Pseudo code:

$.validator.addClassRules('checkboxOrRadioError', {
   onError: function() {
       $(this).parents('.block').addClass('error');
   }
});

Answer 1

You can use the errorPlacement callback to over ride the default placement of errors or the highlight callback in conjunction with unhighlight. You now take control of what happens but must write all the conditions

Example:

$('form').validate(function() {

    highlight: function(element, errorClass) {
        var $el = $(element);
        if ($el.is(':radio') || $el.is(':checkbox')) {
            $el.closest('.block').addClass(errorClass)

        } else { 
                /* add code for default*/
        }

    },

    unhighlight: function(element, errorClass) { 
                /* code to reverse the above*/
    }
})​