jQueryのカスタム検証では、最後のフィールドのエラーのみが表示されます

Question

次の単純な検証コードをJqueryで作成しましたが、すべて正常に機能していますが、最後のフィールドのエラーだけが表示されます。 私はエラーのdivでこのフィールドセットを置く開始しました：私は今、すべてが正しく動作している

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

} 

をチェックするために、この

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

機能のようなものを試してみた

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

次タイトルとアドレスの両方が入力されていない場合は、アドレスエラー（エラー2）のみが表示されます。アドレスを挿入するとタイトル入力は赤い枠で強調表示されますが、メッセージは表示されません（エラー1）。私は間違っているの？ 2番目のケースのエラーで

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

：あなたは完全にこの行（前にそこにあったものを消去）とFS-エラーのdivを書き換えているので、唯一の二番目が表示されている2つのエラーがあるおかげで事前に

Answer 1

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

あなたはエラーがない場合にのみ、それを非表示にする：あなたはあなたの第2のアドレスの検証にdiv要素を隠しているので、1は表示されません。

Answer 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>