La validation personalizzata jQuery mostra solo l'errore dell'ultimo field

Ho scritto il seguente codice di validation semplice con Jquery, tutto funziona bene, ma viene visualizzato solo l'errore dell'ultimo field. Ho iniziato a immettere questo field con un div di errore:

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

Avanti ho provato qualcosa di simile

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

Funzione per il controllo

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

Ora tutto funziona correttamente ma se non sia riempito sia il titolo che l'indirizzo, esso mostra solo l'errore di indirizzo ( errore 2 ). Se inserisco l'indirizzo, l'input del titolo viene evidenziato con il bordo rosso, ma il suo messaggio non viene visualizzato ( errore 1 ). Che cosa sto facendo male? Grazie in anticipo

Quando ci sono 2 errori solo il secondo mostra perché sei completamente riscrivere il div di fs-error con questa row (cancellando quello che c'era prima):

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

Nel secondo caso l'errore 1 non viene visualizzato perché nascondi div nella seconda validation di indirizzi:

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

Vuoi nasconderlo solo se non ci sono errori.

È required un approccio che utilizza HTML5 , attributi di pattern ; CSS :invalid :valid , :valid :not() , ::after , content , selettore generale fratello ~

 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>