jQuery benutzerdefinierte Validierung zeigt nur Fehler des letzten Felds

Question

Ich habe den folgenden einfachen Validierungscode mit Jquery geschrieben, alles funktioniert gut, aber nur der Fehler des letzten Feldes wird angezeigt. Ich habe den Autor dieses Fieldset mit einem Fehler div Abdrucken:

<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 ich so etwas wie diese

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

Funktion versucht habe, für die Überprüfung

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

} 

jetzt alles richtig funktioniert Wenn jedoch Titel und Adresse nicht ausgefüllt sind, wird nur der Adressfehler angezeigt (Error 2). Wenn ich die Adresse einfüge, wird die Titeleingabe mit einem roten Rand hervorgehoben, aber ihre Nachricht wird nicht angezeigt (Fehler 1). Was mache ich falsch? Vielen Dank im Voraus

Answer 1

Wenn 2 Fehler nur zweite zeigt, ist, weil Sie vollständig fs-Fehler div mit dieser Linie (Löschen, was dort vor) sind Umschreiben:

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

In Ihrem zweiten Fall Fehler 1 ist nicht, weil Sie div in Ihrem zweiten Adressvalidierung versteckt sind angezeigt:

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

Sie wollen es nur verstecken, wenn es keine Fehler gibt.

Answer 2

Ein Ansatz unter Verwendung von HTML5required, pattern Attributen; CSScounter, :invalid, :valid, :not(), ::after, content, allgemeine Geschwister-Selektor ~

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>