38476

Override jQuery validation highlight / unhighlight methods

Question:

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'); }, });

<a href="https://stackoverflow.com/questions/11477848/overriding-jquery-validation-highlight-unhighlight-methods" rel="nofollow">This question</a> 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?

Answer1:

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.

<blockquote>

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

</blockquote>

Simply copy the meat of the default functions from <a href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js" rel="nofollow">within the plugin</a> 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'); }, }); <blockquote>

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

</blockquote>

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. <em>(This is how user configurable options of jQuery plugins work... they over-ride/replace the built-in defaults.)</em>

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

Recommend

  • Fluent NHibernate: ManyToMany Self-referencing mapping
  • Angular-ui-router child state with multiple parent states
  • summarize values on a tree
  • Limit the number of visible pages in pagination
  • Fading between images
  • Increasing dimensions on hover without changing the position of other elements
  • jQuery panel slider opens with button click but won't close
  • Responsive jqGrid with bootstrap classes to the column headers
  • How to keep button state across different pages?
  • Get css animation property with jQuery
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • How to assign byte[] as a pointer in C#
  • Calling Worksheet functions from vba in foreign language versions of Excel
  • Do I need to reset a Perl hash index?
  • FileReader+canvas image loading problem
  • Ajax Loaded meta Tags
  • Xamarin Forms - UWP Fonts
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Read text file and split every line in MSBuild
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Menu Color Fade on Hover with Jquery
  • javascript inside java/jsp code
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • jQuery tmpl and DataLink beta
  • Arrays break string types in Julia
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • Acquiring multiple attributes from .xml file in c#
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • embed rChart in Markdown
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • java string with new operator and a literal