Using nested error wrappers with jQuery validation plugin

Question

I am using jQuery validate plugin . My error labels are styled as tooltips and use many levels of nested divs to create. There is a wrapper parameter in the plugin that allows you to specify the type of an element as a wrapper for an error message, but it is only wrapped once.

Does anyone know how to make nested packaging?

This is not my exact markup, but as an example:

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

* UPDATE *

Chris's answer answers my original question, but poses a new problem. Errors are now displayed at will, but the plugin cannot clear them. Upon completion of the failed check, it is span.errorset to display:none, but the nested shell div.tooltipis still displayed.

Answer 1

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

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

In my code, I connected event listeners to form fields that remove the pop-up tooltips that are in the same parent container as the fields themselves.

Answer 2

, , , , showErrors .

jquery/javascript span , . , , . , , div .

, , , . , - , . , .

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

html.

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

Answer 3

, , css. , , .

, ​​ 0. , , .

. , ​​ , . , , , .

, .

Answer 4

The way you do is decent. Another option is to have your label existing and hidden. The validation plugin will look for a label with class = "error", and for = "the element should be marked as invalid" and will show it if it is found, rather than creating a new label. Of course, if you also want to show your tooltip in the same code, you will need to do it with highlighting and not highlighting.