Question

我用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 ）。我做错了什么？提前致谢

Answer 1

如果有2个错误，则仅显示第二个错误，因为您已完全使用此行重写fs-error div（删除之前的内容）：

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

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

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

只有在没有错误时才想隐藏它。

Answer 2

利用HTML5 required，pattern属性的方法; CSS counter，:invalid，:valid，:not()，::after，content，一般兄弟选择器~ < / p>

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>

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

2 个答案: