CODEWITHSUNDEEP
jqueryjquery-validate
coure2011
coure2011

Reputation: 42444

jQuery Validate plugin: callback when element value is valid

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?

Upvotes: 1

Views: 5337

Answers (2)

Sebastian G
Sebastian G

Reputation: 221

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

Upvotes: 1

Sparky
Sparky

Reputation: 98738

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

Upvotes: 3

Related Questions