jQuery自定义验证仅显示最后一个字段的错误答案

【问题标题】：jQuery custom validation displays only error of last fieldjQuery自定义验证仅显示最后一个字段的错误
【发布时间】：2016-04-17 15:25:43
【问题描述】：

我用 Jquery 编写了以下简单的验证代码，一切正常，但只显示最后一个字段的错误。我已经开始放置这个带有错误 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>

接下来我尝试了类似的方法

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 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;
  }

}

现在一切正常，但如果标题和地址均未填写，则仅显示地址错误（错误 2）。如果我插入地址，标题输入会以红色边框突出显示，但不会显示其消息（错误 1）。我做错了什么？提前致谢

【问题讨论】：

“它只显示地址错误（错误 2）” 似乎正在覆盖现有的 html jQuery('.fs-error').html('<span style="color:red;"> Error 2 </span>'); ？您也可以使用html5、css 来实现需求。

标签： javascript jquery forms validation

【解决方案1】：

当出现 2 个错误时，仅显示第二个错误，因为您正在使用这一行完全重写 fs-error div（删除之前的内容）：

jQuery('.fs-error').html('<span style="color:red;"> Error 2 </span>');

在您的第二种情况下，不显示错误 1，因为您在第二次地址验证中隐藏了 div：

jQuery('.fs-error').hide();

只有在没有错误的情况下才想隐藏它。

【讨论】：

感谢您的大力帮助！ @步行
@XiLab 没问题，这是一个应该可以工作的快速修复pastebin.com/JM4NGhqf（注释行并将第二个“html()”更改为“append()”）。

【解决方案2】：

一种利用HTML5required、pattern属性的方法； CSScounter,:invalid,:valid,:not(),::after,content,通用兄弟选择器~

body {
  counter-reset: err;
  counter-reset: err2;
  counter-increment: err2 2;
}
.fs-error {
  display: none;
}
input:not(:invalid) {
  border-bottom: 2px solid rgb(0, 102, 0);
}
input:invalid {
  border-bottom: 2px solid red;
}
input:invalid ~ .fs-error {
  display: block;
  position: relative;
  top: -70px;
  color: red;
}
input:nth-of-type(1):invalid ~ input:valid ~ .fs-error::after {
  counter-increment: err;
  content: "Error " counter(err);
}
input:nth-of-type(1):valid ~ input:nth-of-type(2):invalid ~ .fs-error::after {
  counter-increment: err 2;
  content: "Error " counter(err);
}
input:nth-of-type(1):invalid ~ input:nth-of-type(2):invalid ~ .fs-error::after {
  counter-increment: err;
  content: "Error " counter(err)", Error " counter(err2);
}

<fieldset data-check-id="1">
  <br>1
  <input type="text" size="50" id="ptitle" name="title" minlength="1" pattern="\w+" required/>
  <br>2
  <input type="text" id="address" name="p_address" minlength="1" pattern="\w+" required/>
  <div class="fs-error"><span></span>
  </div>
</fieldset>

【讨论】：