jquery - 使用 JQuery 验证时有效地插入一个 Div

Question

我有如下形式的 Jquery 验证:

$(this.initVariables.formId).validate({
     errorElement: "div",
     errorPlacement: function(error, element) {
        error.insertBefore(element.parent());
     }
}

问题是当出现错误时，表格变得扭曲如下:

我想做的是有效调整与错误字段相同行的邻居字段，如下所示:

div的HTML代码是:

<div class="relatedField>
    <div id="wwgrp_addForm_summaryData_firstName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_firstName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> FIRST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_firstName" class="wwctrl">
               <input id="addForm_summaryData_firstName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.firstName">
          </div>
    </div>
    <div id="wwgrp_addForm_summaryData_lastName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_lastName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> LAST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_lastName" class="wwctrl">
               <input id="addForm_summaryData_lastName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.lastName">
          </div>
    </div>
</div>

如何在不更改表单实现的情况下使用 jquery 执行此操作。除此之外，我还有很多领域。请帮忙。谢谢。

我的解决方案是

 errorPlacement: function(error, element) {
     error.insertBefore(element.parent());
     element.parent().parent().siblings().each( function () {
           var child = $(this).children("div.wwctrl");
        $("<div class='SPACE'>&nbsp;</div>").insertBefore(child);
      });
 }

但如您所见，它并不干净，在正确验证后，div 空间未被删除。

关于如何做得更好的任何想法。

谢谢。

Answer 1

你基本上可以在输入的顶部创建一个空白 div 并为它们声明一个宽度/高度。就像你的浏览器会从一开始就计算这个“空白”，你可以通过 $ 插入错误消息('divname').html。只是一个想法。有点像这样..

http://jsfiddle.net/ng8VQ/72/