jQuery Validate plugin: callback when element value is valid

Question

errorPlacement: function(error, element) {
            if(element.hasClass('chosen-select')){
                error.insertAfter(element.next());
                element.next().addClass('error');
            }
}

When no value is selected in select element using the above code I can easily add class error to my desired element. But the problem is when element's value is valid (In this case when any option is selected) How to remove that class I added in errorPlacement event?

Is there any event that is fired when element value is valid?

Have you checked the docs? Every callback function is listed here. — Sparky
– Sparky, Commented Sep 3, 2013 at 14:31

Sparky · Accepted Answer · 2013-09-04 14:01:55Z

Your code:

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
        element.next().addClass('error');
    }
}

The errorPlacement callback function is only fired once to place the initial error label. It will not work as error messages come and go, because the plugin automatically toggles those.

The success callback is fired on a valid element. However, that is used to toggle the error label. Example, when you want to place a message or an object like a green check-mark next to a valid element. You mention toggling classes, so it seems you might not want success.

I can't say for sure which will work out for you because you have not provided a concise working demo. However, it looks like you should be using the highlight and unhighlight callback functions if you want to toggle classes. Keep in mind that, by using your own custom highlight/unhighlight functions, they will replace the plugin's defaults.

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
    }
},
highlight: function(element, errorClass, validClass) {
    $(element).next().addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
    $(element).next().removeClass('error');
}

And since the default error class is error, you can simply use the errorClass argument.

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
    }
},
highlight: function(element, errorClass, validClass) {
    $(element).next().addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
    $(element).next().removeClass(errorClass);
}

See the docs for all available callback functions and options.

Additional Reference

These are the default callback functions:

highlight: function( element, errorClass, validClass ) {
    if ( $(element).attr("type") === "radio" ) {
        this.findByName($(element).attr("name")).addClass(errorClass).removeClass(validClass);
    } else {
        $(element).addClass(errorClass).removeClass(validClass);
    }
},
unhighlight: function( element, errorClass, validClass ) {
    if ( $(element).attr("type") === "radio" ) {
        this.findByName($(element).attr("name")).removeClass(errorClass).addClass(validClass);
    } else {
        $(element).removeClass(errorClass).addClass(validClass);
    }
}

Source: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

@coure2011, I only followed the plugin's source code. However, you are correct.

Sebastian G · Accepted Answer · 2016-03-19 00:30:18Z

Using the success callback function, it is possible to get a reference to the actual form element that failed validation is possible. The example below adds a class to the parent div of each form field when they fail validation, and then removes the error class once the field passes:

form.validate({
        rules: {
            Name: {
                required: true
            },
            Email: {
                required: true
                , regex: "^[0-9a-zA-Z.+_\-]+@{1}[0-9a-zA-Z.+_\-]+\\.+[a-zA-Z]{2,4}$"
            }
        },
        messages: {
            Name: {
                required: "Please give us your name"
            },
            Email: {
                regex: "Please enter a valid email address"
            }
        },

        errorPlacement: function(error, element) {
            element.parent().addClass("error");
        },

        success: function(element) {
            $("#" + element.attr("for")).parent().removeClass("error");
        }
    });

Collectives™ on Stack Overflow

jQuery Validate plugin: callback when element value is valid

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related