Override jQuery validation highlight / unhighlight methods

问题

I want to override the highlight and unhighlight functions in jQuery validator to do what they normally and also add a different class to a parent element.

Basically I want this: (Where I need help wish the base.. part)

    jQuery.validator.setDefaults({
         highlight: function(element, errorClass, validClass) {
             base.highlight(element, errorClass, validClass);
             element.parents('div.form-group').addClass('has-error');
          },
         unhighlight: function(element, errorClass, validClass) {
             base.unhighlight(element, errorClass, validClass);
             element.parents('div.form-group').removeClass('has-error');
          },
    });

This question is asking the exact same thing however that answer doesn't work. The original function is not being passed in. Perhaps the code has since been changed?

回答1:

highlight: function(element, errorClass, validClass) {  // line 1
    base.highlight(element, errorClass, validClass);    // go to line 1
    ....

You can't call highlight() and unhighlight() from within highlight() and unhighlight(). Why? Because any custom callback functions totally over-ride the plugin's built-in functions, so if the logic you propose above worked, it would be infinitely looped.

I want to override the highlight and unhighlight functions in jQuery validator to do what they normally and also add a different class to a parent element

Simply copy the meat of the default functions from within the plugin into yours and modify them as you wish.

jQuery.validator.setDefaults({
    highlight: function(element, errorClass, validClass) {
        // default function
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
        // custom additions
        element.parents('div.form-group').addClass('has-error');
    },
    unhighlight: function(element, errorClass, validClass) {
        // default function
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
        // custom additions
        element.parents('div.form-group').removeClass('has-error');
    },
});

The original function is not being passed in. Perhaps the code has since been changed?

I have no idea what they were thinking or if their solution ever worked. When you use custom callback functions for the jQuery Validate plugin, they completely over-ride the default functions built into the plugin. (This is how user configurable options of jQuery plugins work... they over-ride/replace the built-in defaults.)

So simply copy the original code from the plugin into your custom callback functions and modify them as needed.

来源：https://stackoverflow.com/questions/37422217/override-jquery-validation-highlight-unhighlight-methods

标签

jquery

jquery-validate