Fehlermeldung im Panel meiner HTML-Seite ausdrucken

Question

Ich möchte eine Reihe von Fehlermeldungen auf meiner HTML-Seite basierend auf dem, was der Benutzer eingibt, wie Passwort, Benutzername, Adresse usw., die die Informationen fehlgeschlagen bestätigen.

Mein Code sieht wie folgt aus:

function validate(){ 
     var x,y,z; 
     x = document.getElementById("name").value; 
     if (x.length<6){ 
       text="user name too short"; 
     } else { 
      text="validated"; 
     }  
     document.getElementById("aka").innerHTML = text; 
    } 

Jetzt kann ich nur einen Eingang validieren. In diesem Fall die Eingabe mit der ID "name".
Ich möchte alle Eingaben wie Passwort auch in dieser Funktion überprüfen.

Wie kann ich das in der Funktion implementieren?

Ich habe versucht, mehr if Anweisung gefolgt von einem anderen document.getElementById("aka").innerHTML = text hinzuzufügen, aber hat nicht funktioniert und das erste nicht ausgedruckt.

Answer 1

Erstellen Sie eine Variable und legen Sie alle Fehlermeldungen dort. Sobald Sie fertig sind, setzen Sie den Wert dieser Variable in die innerHTML des gewünschten Elements.

function validate(){ 
    var x, errors = ""; 

    x = document.getElementById("name").value; 
    if (x.length<6){ 
      errors += "user name too short<br />"; 
    } 

    x = document.getElementById("password").value; 
    if (x.length<6){ 
      errors += "password too short<br />"; 
    } 

    document.getElementById("aka").innerHTML = errors; 
} 

Answer 2

können Sie entweder speichern alle Nachrichten innerhalb Textvariablen

var text = ""; 
if (x.length<6){ 
    text+="user name too short"; 
} 

if(y.lenght<6) { 
    text+= 'pwd too short'; 
}  
document.getElementById("aka").innerHTML = text; 

Andere Option wäre DOM functions werden wie folgt verwendet:

document.appendChild(document.createTextNode(text)); 

var text =""; 
 
text += "user name too short"; 
 
text += "<br/>pwd too short"; 
 

 
document.getElementById('out1').innerHTML=text; 
 

 

 
document.getElementById('out2').appendChild(document.createTextNode('user name too short')); 
 
document.getElementById('out2').appendChild(document.createTextNode('pwd too short'));

<div id="out1"></div> 
 
<div id="out2"></div>