Question

I have buttons that trigger jQuery validation. If the validation fails, the button is faded to help draw attention away from the button to the validation messages.

$('#prev,#next').click(function (e)
{
    var qform = $('form');
    $.validator.unobtrusive.parse(qform);
    if (qform.valid())
    {
        // Do stuff then submit the form
    }
    else
    {
        $('#prev').fadeTo(500, 0.6);
        $('#next').fadeTo(500, 0.6);
    }

That part works fine.

However, I would like to unfade the buttons once the invalid conditions have been cleared.

Is it possible to hook into jQuery Validation to get an appropriate event (without requiring the user to click a button)? How?

Update

Based on @Darin’s answer, I have opened the following ticket with the jquery-validation project

https://github.com/jzaefferer/jquery-validation/issues/459

Answer 1

It might sound you strange but the jQuery.validate plugin doesn’t have a global success handler. It does have a success handler but this one is invoked per-field basis. Take a look at the following thread which allows you to modify the plugin and add such handler. So here’s how the plugin looks after the modification:

numberOfInvalids: function () {
    /* 
    * Modification starts here...
    * Nirmal R Poudyal aka nicholasnet
    */
    if (this.objectLength(this.invalid) === 0) {
        if (this.validTrack === false) {
            if (this.settings.validHandler) {
                this.settings.validHandler();
            }
            this.validTrack = true;
        } else {
            this.validTrack = false;
        }
    }
    //End of modification 

    return this.objectLength(this.invalid);
},

and now it’s trivial in your code to subscribe to this event:

$(function () {
    $('form').data('validator').settings.validHandler = function () {
        // the form is valid => do your fade ins here
    };
});

By the way I see that you are calling the $.validator.unobtrusive.parse(qform); method which might overwrite the validator data attached to the form and kill the validHandler we have subscribed to. In this case after calling the .parse method you might need to reattach the validHandler as well (I haven’t tested it but I feel it might be necessary).