javascript - jquery validate - 取消突出显示问题

Question

我有一个大型验证表单，除了一个问题外，它运行良好。问题是，我有 2 个规则需要进入同一个 div(不使用规则，它们需要单独列出)，它们周围有红色边框/ block 样式。这实现的是一个包装 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 右侧的 float 框，其中列出了该特定行的错误

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