CODEWITHSUNDEEP
jqueryjquery-validate
Malachi
Malachi

Reputation: 2463

Overriding jQuery validation highlight / unhighlight methods

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--

Upvotes: 1

Views: 13044

Answers (2)

Jon Jaques
Jon Jaques

Reputation: 4410

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.

Upvotes: 3

Jon Jaques
Jon Jaques

Reputation: 4410

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/

Upvotes: 1

Related Questions