Question

我有一个很大的验证表单，除了一个问题外，它运行得非常好。问题是，我有2条规则需要进入相同的div（不使用规则，它们需要分开列出），它周围会有一个红色边框/块样式。这实现了一个包裹2帧的div。风格/间距很好。问题是，当所有字段都被填写时，即使没有错误，我仍然会得到一个小红框（div样式保持为display = block。因为这些是我的错误容器，不应该显示一旦其中的字段有效，动态变为无？有没有什么方法可以让显示更改为无？一旦该行中的字段有效？非常感谢，我已经在这几天了。

这是我正在使用的代码（相关部分）。

function myErrorPlacement(error, element) {
if ((element.attr("id") == "fname") || (element.attr("id") == "lname")) {
  $ms("#billing1_e").append(error) ;
}
if (element.attr("id") == "address") {
   $ms("#billing2_e").append(error) ;
}
if ((element.attr("id") == "city") || (element.attr("id") == "state1") || (element.attr("id") == "zip")) {
   $ms("#billing3_e").append(error) 
}
if ((element.attr("id") == "email") || (element.attr("id") == "emailver")) {
   $ms("#billing4_e").append(error) 
}
if ((element.attr("id") == "pass") || (element.attr("id") == "passver")) {
   $ms("#billing5_e").append(error) 
}
if ((element.attr("id") == "expmonth") || (element.attr("id") == "expyear")) {
   $ms("#billing7_e").append(error) 
}
if (element.attr("id") == "chkOffer") {
   $ms("#billing8_e").append(error) 
}
if (element.attr("id") == "billingCC") {
   $ms("#billing6_e").append(error) 
}

和

$ms("#billingForm").validate({

      highlight: function(element) {

         $ms(element).closest(".BF_Body").next().addClass('billing_e')
      },
    errorContainer: ".billing_e",
            errorPlacement: myErrorPlacement

和css：

.billing_e
{   
position:relative;
float:left;
background-color:#f3e6e6;
border:2px solid #924949;
padding:3px 4PX;
z-index:4;
color:#924949;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
font-weight:bold;   
}

编辑，对不起，这是html代码。我有几行像这样。我实现的是div右侧的浮动框，其中列出了该特定行的错误

      <div class="BF_Body" id="billing1">
      <div class="BF_Body_L"><input name="fname"  id="fname" type="text" Title="First Name" maxlength="50" class="textboxpg2" ></div>
      <div class="BF_Body_R"><input name="lname"  id="lname" type="text" Title="Last Name" maxlength="50"  class="textboxpg2" ></div>
  </div>
  <div id="billing1_e" class="billing_e"></div>
  <div class="BF_Body" id="billing2">
    <div class="BF_Body_L"><input name="address" id="address" type="text" title="Address" maxlength="50" class="textboxpg2"></div>
    <div class="BF_Body_R"><input name="address2" id="address2" type="text" Title="Address 2" maxlength="50" class="textboxpg2"></div>
  </div>
  <div id="billing1_e" class="billing_e"></div>

这是一个截图： http://img.photobucket.com/albums/v385/gefeno/screenshot.jpg

Answer 1

您可以添加取消强调规则，以便在没有错误时更改div的颜色

highlight: function(element) {

         $ms(element).closest(".BF_Body").next().addClass('billing_e')
      },

unhighlight: function (element, errorClass) {

        $ms(element).closest(".BF_Body").next().addClass('success class')            
    }

Answer 2

不确定这是否有效，但您可能想尝试将ID添加到消息框中，然后在.validate（）中列出它们

所以而不是：

errorContainer: ".billing_e"

尝试：

errorContainer: "#messageBox1, #messageBox2, ..."

这似乎更接近文档中显示的示例（http://docs.jquery.com/Plugins/Validation/validate#toptions）

jquery验证 - unhighlight问题

2 个答案: