Markieren Sie mehrere Felder auf validieren Sie Javascript

Question

Ich möchte, wenn Textfelder leer es wird es hervorheben. Folgendes ist mein Code, der nur ein Feld gleichzeitig hervorhebt. Wenn beide Felder leer sind, wird ein Feld hervorgehoben.

<script> 
function ValidateForm(){ 

    var summary=document.getElementById("<%=summary.ClientID%>"); 
    if (summary.value == "" && txtTest.value == "") { 
     summary.style.backgroundColor = "Yellow"; 
     return false; 
    } 
    var txtTest = document.getElementById("<%=txtTest.ClientID%>"); 
    if (txtTest.value == "") { 

     txtTest.style.backgroundColor = "Yellow"; 
     return false; 
    } 

    return true; 

} 
</script> 

Bitte helfen Sie mir, dieses Problem zu lösen. Ich möchte keine Standardvalidatoren verwenden.

Answer 1

Dies liegt daran, dass Sie vor dem Überprüfen der zweiten Eingabe false zurückgeben. Sie müssen true oder false erst zurückgeben, nachdem alle Eingaben überprüft wurden. Außerdem müssen Sie zunächst txtTest abrufen, bevor Sie den Wert überprüfen. Sie können etwas wie folgt tun:

Answer 2

anstelle von false in Fehlerbedingung zurückgeben Verwenden Sie Flag, um Fehler anzuzeigen.

Standardmäßig ist das Flag wahr und wenn es einen Fehler gibt, sollte es auf false gesetzt werden.

schließlich Fehler Flag zurückgeben.

<script> 
function ValidateForm(){ 
var flag=true; 
var summary=document.getElementById("<%=summary.ClientID%>"); 

if (summary.value == "" && txtTest.value == "") { 
    summary.style.backgroundColor = "Yellow"; 
    flag=false; 
} 
var txtTest = document.getElementById("<%=txtTest.ClientID%>"); 
if (txtTest.value == "") { 

    txtTest.style.backgroundColor = "Yellow"; 
    flag=false; 
} 

return flag; 

} 
</script> 

Answer 3

zuerst sollten Sie TxtTest var bevor es Auswertung dann statt nach jeder Rückkehr wenn, tun es im Grunde für die Validierung

var summary=document.getElementById("<%=summary.ClientID%>"); 
var txtTest = document.getElementById("<%=txtTest.ClientID%>"); 

if (summary.value == "") { 
    summary.style.backgroundColor = "Yellow"; 
} 

if (txtTest.value == "") { 
    txtTest.style.backgroundColor = "Yellow"; 
} 
return !(summary.value == "" || txtTest.value == "") 

Answer 4

Ein alternativer Ansatz, wenn Ihre Form komplexer ist vielleicht zu Trennen Sie die Validierung und Hervorhebung.

// onKeyUp 
 
function k(e) { 
 
this.style.background = (this.value) ? "none" : "#0f0"; 
 
} 
 
window.onload = function() { 
 
    var t = ["in1","in2","in3"]; 
 
    var i, max = t.length; 
 
    var d; 
 
    for(i=0;i<max;i++) { 
 
    d = document.getElementById(t[i]); 
 
    d.style.background="#0f0"; 
 
    d.addEventListener("keyup",k,false); 
 
    } 
 
}

<input type="text" id="in1" name="in1" placeholder="Input 1"/><br /> 
 
<input type="text" id="in2" name="in2" placeholder="Input 2"/><br /> 
 
<input type="text" id="in3" name="in3" placeholder="Input 3"/><br />