Using nested error wrappers with jQuery validate plugin

Question

I am using the jQuery validate plugin. My error labels are styled like tooltips and take many levels of nested divs in order to create. The plugin has a wrapper option that allows for an element type to be specified as a wrapper for the error message, but it's only wrapped once.

Is anyone familiar with how to do nested wrapping?

This isn't my exact markup, but as an example:

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

* UPDATE *

The response from Chris answers my original question, but creates a new problem. The errors are now being displayed as desired, but the plugin fails to clear them. When a failed validation passes, span.error is set to display:none, but the div.tooltip nested wrapper still displays.

Answer 1

I don't know of a way to create a nested wrapper with the wrapper option, but perhaps you could use the showErrors handler to achieve the same effect.

Basically you would use old fashioned jquery/javascript to wrap the span element after the plugin shows the errors. I think the trick will be figuring out if you've already wrapped it in a tooltip. Perhaps, you can do this by finding the closest div with a class of tooltip from the span.

I hope a more elegant solution presents itself, but I think this is a good start. Let me know if you find any tweaks to make it more efficient. I didn't have alot of time to play around with it.

showErrors: function(errorMap, errorList) {

  var errorListSize = errorList.length;
  this.defaultShowErrors();

  if(errorListSize > 0) {
    $('span.error').each(function() {
      if($(this).closest('div.tooltip').size() == 0) {
        $(this).wrap('<div class="tooltip"></div>').wrap('<div></div>').wrap('<div></div>');
      }
    });
  }
},

Here's the html that is generated.

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

Answer 2

I had this same problem but since I couldn't fix it in the validation plugin I did it in css. While I can't see what the tooltip box looks like this could be your solution.

What I did was set the height of the tooltip box to 0. So when nothing was in it you wouldn't be able to see it.

I gave the error class the height of the tooltip. so when the error got added to the tooltip the tooltip would show. When error element got deleted from the tooltip it wouldn't show anymore because it didn't inherit the height anymore since the error element inside is gone.

Maybe this solution works for you too.

Answer 3

What I ended up doing (it works) was adding a custom unhighlight event to to the plugin's unhighlight function:

unhighlight: function(element, errorClass, validClass ) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element).trigger("unhighlight");
}

In my code, I attached event listeners to the form fields that remove any error tooltips residing in the same parent container as the fields themselves.

Answer 4

The way you are doing is decent. The other option is to have your label existing and hidden. The validation plugin will look for a label that has class="error" and for="the element has it needs to mark as invalid" and will show it if found rather than create a new label. of course if you want to also show your tooltip in the same code, you would need to have this done in highlight and unhighlight.