CODEWITHSUNDEEP
jquery-validateasp.net-mvc-4
Eric J.
Eric J.

Reputation: 150108

jQuery Event when Validation Errors Corrected

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

Upvotes: 0

Views: 2525

Answers (2)

Oskar Sjöberg
Oskar Sjöberg

Reputation: 2878

I ran into a similar issue. If you are hesitant to change the source as I am, another option is to hook into the jQuery.fn.addClass method. jQuery Validate uses that method to add the class "valid" to the element whenever it is successfully validated.

(function () {
    var originalAddClass = jQuery.fn.addClass;
    jQuery.fn.addClass = function () {        
        var result = originalAddClass.apply(this, arguments);
        if (arguments[0] == "valid") {
            // Check if form is valid, and if it is fade in buttons.
            // this contains the element validated.
        }
        return result;
    };
})();

I found a much better solution, but I am not sure if it will work in your scenario because I do not now if the same options are available with the unobtrusive variant. But this is how i did it in the end with the standard variant.

$("#form").validate({
    unhighlight: function (element) {
        // Check if form is valid, and if it is fade in buttons.
    }
});

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038800

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).

Upvotes: 2

Related Questions