jQuery验证-突出问题

如何解决jQuery验证-突出问题

| 我有一个很大的验证表单，除了一个问题外，它运作良好。事实是，我有2条规则需要进入同一div（不使用规则，它们需要分开列出），该规则/块样式周围将带有红色边框。这样实现的是一个div，它包装了2个帧。样式/间距很好。问题是，当所有字段都填满后，即使没有错误，我仍然会得到一个红色的小框（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     

解决方法

不知道这是否行得通，但您可能想尝试将ID添加到消息框中，然后将其列出在.validate（）中 所以代替：

errorContainer: \".billing_e\"

尝试：

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

这似乎更接近该示例在docs（http://docs.jquery.com/Plugins/Validation/validate#toptions）中显示的内容     ,您可以添加取消突出显示的规则以在没有错误时更改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\')            
    }