livequery not always live when used with jquery.validate

Question

I use jquerylive plugin to add additional css classes to .field-validation-error class like this:

$(".field-validation-error").livequery(function () { 
    $(this).addClass('ui-state-error ui-corner-all'); 
});

when I get some spans with this class generated by jquery.validate the above code works, but at 2nd validation it doesn't.

here is the live link: http://mrgsp.md:8080/awesome/person click on create after click save to get validation messages and click again on save

Answer 1

Can you not just the the errorClass option?

$(".selector").validate({
   errorClass: "field-validation-error ui-state-error ui-corner-all"
})

Or maybe:

$.validator.setDefaults({ 
   errorClass: "field-validation-error ui-state-error ui-corner-all"
});

Answer 2

Why not hook your function into the same event that triggers validate()?

Update

I read the other comments and saw you were using xVal, read up a bit on jQuery.Validate as well. jQuery.Validate ties in with many events and registering on the event handlers would be messy. The reason that livequery works first time is that the labels are generated if they don't previously exist so that creation event makes the function run, everytime after this the label is just hidden/shown so it doesn't get triggered again but jQuery.validate's showLabel function resets the classes.

The ideal place is in xVal by making one small change in the xVal.jquery.validate.js file. In the _ensureFormIsMarkedForValidation method are the lines:

ensureFormIsMarkedForValidation: function(formElement, options) {
        if (!formElement.data("isMarkedForValidation")) {
            formElement.data("isMarkedForValidation", true);
            var validationOptions = {
                errorClass: "field-validation-error",

All you should need to do is change errorClass to:

errorClass: "field-validation-error ui-state-error ui-corner-all",

This is because xVal is doing the setting up of the validate plugin.