jQuery自定义验证只显示最后一个字段的错误 [英] jQuery custom validation displays only error of last field

问题描述

我用Jquery编写了以下简单的验证代码，一切正常，但只显示最后一个字段的错误。
我已经开始将这个字段集放入一个错误div中：

 < fieldset data-check-id = 1\" > 
< div class =fs-error>< / div> 
< input type =textsize =50id =ptitlename =title/> 
< input type =textid =addressname =p_address> 
< / fieldset> 
  

接下来我试过类似的东西

 函数检查（$ fs）{
 var ok = true; 
 switch（$ fs.attr（'data-check-id'））{
 case'1'：
 
 $ ptitle = $（'＃ptitle'，$ fs ）; 
 $ address = $（'＃address'，$ fs）; 
 
 // title 
 if（$ ptitle.val（）。length == 0）{
 ok = false; 
 jQuery（#ptitle）.css（border-bottom，2px solid red）; 
 jQuery（'。fs-error'）。html（'< span style =color：red;>错误1< / span>'）; 
 jQuery（'。fs-error'）。show（）; 
} 
 else {
 jQuery（#ptitle）.css（border-bottom，2px solid rgb（0，102，0））; 
 jQuery（'。fs-error'）。hide（）; 
} 
 
 //地址
 if（$ address.val（）。length == 0）{
 ok = false; 
 jQuery（#address）.css（border-bottom，2px solid red）; 
 jQuery（'。fs-error'）。html（'< span style =color：red;>错误2< / span>'）; 
 jQuery（'。fs-error'）。show（）; 
} 
 else {
 jQuery（#address）.css（border-bottom，2px solid rgb（0，102，0））; 
 jQuery（'。fs-error'）。hide（）; 
} 
 break; 
 
 
 if（ok === true）{
 $ fs.attr（'data-complete'，true）; 
返回true; 
} 
 else {
 $ fs.attr（'data-complete'，false）; 
返回false; 
 
 
 
 
 
 
 
检查功能
 
 
  function form_completeCheck（）{
 var ok = true; 
 $（'fieldset'）。each（function（index，elem）{
 $ this = $（this）; 
 if（$ this.attr（'data-complete'）！ ='true'）{
 ok = false; 
}; 
}）
 
 if（ok === true）{
 // go去... 
返回true; 
} 
 else {
 // stop 
 return false; 
} 
 
} 
  
现在一切正常，但如果标题和地址都未填写，只显示地址错误（错误2 ）。如果我插入地址，则标题输入将突出显示红色边框，但其消息不会显示（错误1 ）。我做错了什么？提前致谢        当有2个错误时，只有第二个错误显示，因为你完全用这个重写了fs-error div （删除之前的内容）： 
 
 
  jQuery（'。fs-error'）。html（'< span style =color：red;>错误2< / span>'）; 
  
在第二种情况下，错误1未显示，因为您在第二次地址验证中隐藏了div： 
  jQuery（'。fs-error'）。hide（）; 
  
只有在没有错误时才想隐藏它。
 
I've written the following simple validation code with Jquery, everything is working fine but only the error of last field is displayed.
I've started placing this fieldset with an error div:
<fieldset data-check-id="1">
<div class="fs-error"></div>
<input type="text" size="50" id="ptitle" name="title" />
<input type="text" id="address" name="p_address">
</fieldset>
Next I've tried something like this
function check($fs){
var ok = true;
switch($fs.attr('data-check-id')){
case '1':

$ptitle = $('#ptitle',$fs);
$address = $('#address',$fs);

//title
if ($ptitle.val().length == 0) {
ok=false;
jQuery( "#ptitle" ).css( "border-bottom", "2px solid red" );
jQuery('.fs-error').html('<span style="color:red;"> Error 1 </span>');
jQuery('.fs-error').show();
}
else{
jQuery( "#ptitle" ).css( "border-bottom", "2px solid rgb(0, 102, 0)" );
jQuery('.fs-error').hide();
}

//Address
if ($address.val().length == 0) {
ok=false;
jQuery( "#address" ).css( "border-bottom", "2px solid red" );
jQuery('.fs-error').html('<span style="color:red;"> Error 2 </span>');
jQuery('.fs-error').show();
}
else{
jQuery( "#address" ).css( "border-bottom", "2px solid rgb(0, 102, 0)" );
jQuery('.fs-error').hide();
}
break;
}

if(ok === true){
        $fs.attr('data-complete', true);
        return true;
    }
    else{
        $fs.attr('data-complete', false);
        return false;
    }
}
Function for checking
function form_completeCheck(){
  var ok = true;
  $('fieldset').each(function(index,elem){
    $this = $(this);
    if ($this.attr('data-complete') != 'true') {
      ok = false;
    };
  })

  if (ok === true) {
    //go go go..
    return true;
  }
  else{
    // stop
    return false;
  }

}
Now everything is working correctly but if both title and address are not filled it shows only the address error (Error 2). If I insert the address, title input is highlighted with red border but its message is not displayed (Error 1). What I'm doing wrong? Thanks in advance
解决方案
When there are 2 errors only second one is showing because you're completely rewriting fs-error div with this line (erasing what was there before):
jQuery('.fs-error').html('<span style="color:red;"> Error 2 </span>');
In your second case Error 1 is not displayed because you're hiding div in your second Address validation:
jQuery('.fs-error').hide();
You want to hide it only if there are no errors.

                        
这篇关于jQuery自定义验证只显示最后一个字段的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！