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

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.