jQuery Event when Validation Errors Corrected

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

Darin Dimitrov · Accepted Answer · 2012-07-04 20:00:27Z

2

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

answered Jul 4, 2012 at 20:00

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric J. Over a year ago

Are you saying that I have to modify the source code of jQuery Validate with the new numberOfInvalids method described? While that might be the only way, seems like quite a headache to make that modification every time I take a new version of jQuery Validate.

Darin Dimitrov Over a year ago

Yes, that's what I am saying. Unfortunately the plugin doesn't support the functionality you are trying to implement out-of-the-box.

Eric J. Over a year ago

The post you link to is 2 years old. Does that mean it's very unlikely to be incorporated in the official codebase? Is there a better way to request inclusion than the old post?

Eric J. Over a year ago

Could you have a look at the comments to the ticket I filed with jQuery.Validate? github.com/jzaefferer/jquery-validation/issues/459 I don't know the framework well enough to confirm or deny the reply.

Wasseem Khayrattee Over a year ago

I have tried the method suggested by Darin, it works! NOTE: - BUT let's say in this validHandler() you were clearing a div box which was displaying all error messages at top of form, once this div is cleared it will not be shown again even if the form were to be invalid again!

Oskar Sjöberg · Accepted Answer · 2012-07-12 10:57:20Z

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

Collectives™ on Stack Overflow

jQuery Event when Validation Errors Corrected

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related