0

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?

Community
  • 1
  • 1
Greg
  • 45,306
  • 89
  • 231
  • 297
  • Then start a bounty instead of re-asking your question. Also, please provide a fiddle if possible. – dude May 24 '16 at 19:34

1 Answers1

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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Thanks, but does that introduce a risk when I go to upgrade jQuery validate someday? It seems like it would be safer to call their own function. But I guess it's not possible. – Greg May 24 '16 at 20:21
  • @Greg, the `highlight` and `unhighlight` functions simply add/remove the classes so AFAIK, have changed very little, probably not at all, through the years. See change-log: https://github.com/jzaefferer/jquery-validation/blob/master/changelog.md – Sparky May 24 '16 at 22:01
  • @Greg, as long as `highlight` an `unhighlight` are doing what you require, there's no reason to worry about how the built-in functions might change in the future. Regardless, your concern is the same for every user configurable option of any jQuery plugin... sometimes options are deprecated, replaced, or added. Either you over-ride the defaults (by using the available options) or you don't. – Sparky May 24 '16 at 22:20