4

我有一个表单的 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 空间不会被删除。

在此处输入图像描述

关于如何更好地做到这一点的任何想法。

谢谢你。

4

6 回答 6

2

您实际上可以在输入之上创建一个空白 div 并为它们声明一个宽度/高度。就像您的浏览器从一开始就计算这个“空白空间”一样，您可以通过 $('divname ').html。只是一个想法。有点像这样。。

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

于 2012-10-03T18:40:10.607 回答
1

由于您尚未发布该页面的链接，因此别无选择，只能假设并提出可以完成工作的错误答案。

做这个：

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

         //Insert something here that will overlay all the other errors
         //a div maybe, with opacity=1 leading them to be not visible.

     }
}

请记住使用绝对定位的 div，否则它将使您处于相同的情况。

也许这会让你明白我的意思，例如

于 2012-10-03T19:21:20.857 回答
1

当您检查干净验证时，请查看彼此的错误框并检查 HTML 错误是否为空。如果它是空的，请将其删除。虽然这仍然是一个hacky-work-about。

element.parent().parent().siblings.each( CheckEmpty );

function CheckEmpty() {
    if ( $( this ).html()=="&nbsp;" ) {
        $( this ).remove();
    }
}

或者，如果您给每个空的错误消息一个特定的类，您可以简单地删除所有具有该类名称的元素。但是，这可能会更麻烦，因为它将删除所有这些。如果他们在多个场线上有错误，这将不起作用，因为通过修复一个，它将删除所有这些。

$( ".blank" ).remove();
于 2012-10-03T19:34:59.873 回答
1

如果您查看“仅限字母！”的高度会怎样？元素，只需在其他输入字段的顶部添加那么多填充/边距以将其向下推这么多？

这样，您将避免创建任何新元素，但是当您摆脱“仅限字母！”时，您必须记住删除此边距/填充。元素。

于 2012-10-03T19:42:27.963 回答
0

把整个东西放在桌子上。<tr>在这个<td>新的<tr>. 我希望我很清楚。

于 2012-10-03T20:35:50.560 回答
0 
<form id='register_frm' action='' method='post'>
<input id="firstName" type="text" name="firstName" value="">
 <div class='error-div'>  
<label class='error' for='firstName'></label>   
</div>
<input id="lastName" type="text" name="lastName" value="">
 <div class='error-div'>  
<label class='error' for='lastName'></label>    
</div>
<input type='submit' value='Register' />
</form>

$("#register_frm").validate({
    errorClass:'error',
    rules: {
    firstName: "required",
    lastName: "required"
    }
});

<style>
.error{
color:red;
font-size:12px;
}
.error-div{
height:15px;
}
</style>
于 2015-02-03T18:51:17.923 回答