Overriding jQuery validation highlight / unhighlight methods

Question

apologies if this has been answered before, I couldn't dig anything up when searching.

I am overriding jQuery validator's highlight & unhighlight methods - but I wish to continue calling the 'stock' version of the methods also. In C# this would be like calling base.unhighlight, for example.

As it stands, I am forced to copy & paste code out of the original thus simulating a call to the parent.

jQuery.validator.setDefaults({
    unhighlight: function (element, errorClass, validClass) {
        // base.unhighlight(element, errorClass, validClass) // <-- desired functionality
    ...

How would I go about doing this? Thanks a lot--

I've got a working demo, now - feel free to check it out. – Jon Jaques Jul 13 '12 at 23:20 — Jon Jaques, Jul 13 '12 at 23:20

score 3 · Answer 1 · answered Jul 14 '12 at 00:05

Of course the other way to go about this, as you suggested, is to copy the defaults from the source. Turns out, this may be a smarter approach, because as I said in my other answer, you should only have to call setDefaults once.

I'm not sure how familiar you are with jQuery/JS in general. But normally, you pass in options with each call you make to the validator.

So if I have three forms, I can do:

$('#form1').validate({
   unhighlight: function(el, error, valid){ el.append('<div class="errormsg">Required for Form1</div>'); }
});

$('#form2').validate({
   unhighlight: function(el, error, valid){ $(el).append('<div class="errormsg">Required for Form2</div>'); }
});

$('#form3').validate({
   unhighlight: function(el, error, valid){ $(el).append('<div class="errormsg">Required for Form3</div>'); }
});

But if I want to change the highlight method globally, I can do:

jQuery.validator.setDefaults({
   highlight: function(el, error, valid){ $(el).siblings('.errormsg').remove; }
});

So really you should only need to call the setDefaults method once. And surely copy pasting once wouldn't be too hard.

Jon Jaques · Accepted Answer · 2012-07-13T23:36:09.520

1

With the way this is structured, that's about the best you could do without modifying the plugin. The reason for this, is when you call the setDefault method, it overwrites the plugins own copy of the defaults. This proved hard to get around, but I fixed it by separating the defaults object out & and making a copy of it to refer back to. Honestly copying the simple logic from the plugin source might be the better route at this point, because you should only be calling setDefaults once for your entire implementation.

See my commits here & here. Feel free to fork if you wish.

Basically, now the function you're calling has an extra param, _orig (or whatever you wish). Same goes for highlight.

unhighlight: function (el, error, valid, _orig) {
  _orig(el, error, valid); // runs directly from the defaults.
  // do other stuff.
}

Here's the file

Edit: Wow. That plugin's scope is waayy advanced. It took longer than I thought to implement my solution. Here's a working demo: http://jsfiddle.net/fjMFk/24/

edited Jul 13 '12 at 23:36

answered Jul 13 '12 at 20:46

Jon Jaques

4,262
2
23
25

It's impressive what you've done, I was hoping for something more like http://stackoverflow.com/questions/560829/calling-base-method-using-javascript-prototype - I just can't quite grock the syntax of the linked solution – Malachi Jul 13 '12 at 23:39
Unfortunately, the plugin is not setup to work like the question you linked to. In order to do it like that, large parts of the program would have to be modified, so then you lose the change of being able to merge from upstream. Which part(s) of the syntax is giving you trouble? – Jon Jaques Jul 13 '12 at 23:57
Just generally I'm a JS/jQuery nub =) I thought maybe because I couldn't get the syntax right, I was breaking the prototype.call approach. However based on what you say the core problem is that the jQuery validation code itself doesn't support it anyway-- dang! – Malachi Jul 14 '12 at 00:01
Yeah, pretty much. In this scenario, passing the original copy of the function is the best solution. Because internally, it's not using the prototype chain to construct it's settings. So when you call setDefault, by original design, it blows away the original default properties. – Jon Jaques Jul 14 '12 at 00:11
And it's not that the plugin is bad either, it just wasn't designed to have 13 different signatures like some .NET methods I know of.. :P.. jk. – Jon Jaques Jul 14 '12 at 00:14
This solution isn't working for me. Maybe it's been updated to no longer pass in the function? – Greg May 24 '16 at 18:58
@Greg this answer was based on my custom fork, which I have not modified - so make sure you're using that if trying to use the `_orig` parameter. Despite my previous comments (from 4 years ago), this certainly is not the best solution, only a possible solution. – Jon Jaques May 25 '16 at 19:56

Overriding jQuery validation highlight / unhighlight methods

2 Answers2

Linked