So validieren Sie ein einfaches Webformular

Question

Ich arbeite an einem kleinen Formular und mit js, um zu überprüfen, ob die Felder leer sind oder nicht. Ich habe eine Spannungsklasse neben dem Namensfeld "Name""E-Mail".

Für die "name" Feld, habe ich eine span class "error" genannt.

Für die "email" Feld habe ich eine andere Spannungsklasse namens "Error2".

was kann ich tun, um nur eine Klasse zu verwenden, um die "Fehlermeldung" anzuzeigen, weil natürlich werde ich mehr Feld haben und ich möchte nicht weitere Klassen hinzufügen. error3, Error4

HTML:

<form action="#i" name="myForm" onsubmit="return(validate());"> 
    Name: <span id="error"></span><br> 
    <input type="text" name="Name" /><br><br> 

    EMail: <span id="error2"></span><br> 
    <input type="text" name="EMail" /><br> <br> 

    <input type="submit" value="Submit" /> <br> 
    </form> 

JS:

function validate() 
    { 
    var t = 0;  
    if(document.myForm.Name.value == "") 
    { 
     document.getElementById('error').innerHTML = "<br>Empty"; 
     t = 1; 
    } 

    if(document.myForm.EMail.value == "") 
    { 
     document.getElementById('error2').innerHTML = "<br>Empty"; 
     t = 1; 
    } 

    if(t == 1) 
    { 
     return false; 
    } 
    else 
     return true; 
    } 

Answer 1

anstelle der Spannweiten das Attribut Id geben, anstatt Klassen verwenden. So zum Beispiel, können Sie alle Ihre Spannweiten wie folgt definieren:

<span class="error"> ... </span> 

in Ihrem validate Funktion Dann können Sie diese Spannweiten durch erhalten:

document.getElementsByClassName('error'); 

obwohl Denken Sie daran, gibt diese ein Array , die eigentlich perfekt für Ihre Funktion wären. Auf diese Weise können Sie eine grundlegende for-Schleife schreiben, um durch jeden Bereich zu gehen und sicherzustellen, dass jedes Feld korrekt ausgefüllt ist.