Formularprüfung - Code verbessern?

[Hansii]

Hallo.

Ich habe ein Formular, wo man Vorname, Name, E-Mail, Geschlecht angeben muss. Um auf Vollständigkeit zu prüfen, möchte ich JS benutzen. Mein Code:

<script type="text/javascript">

function pruefen()
    {
    var f = document.forms[0];
    var fehler = "";
    
    if(f.Vorname.value == "")
        {
        fehler += "Vorname, ";
        }
        
    if(f.Nachname.value == "")
        {
        fehler += "Nachname, ";
        }
        
    if(f.E-Mail.value == "")
        {
        fehler += "E-Mail, ";
        }
        
    if(f.Geschlecht.value == "")
        {
        fehler += "Geschlecht, ";
        }
        
    if(fehler != "")
        {
        var fehlertext = "Folgende Felder sind leer:\n";
        fehlertext += fehler;
        alert(fehlertext);
        return false;
        }
        
    return true;
    }
    
</script>

Kann man den Verbessern und/oder Kürzen?

Danke

 

[Tronjer]

Wenn du lediglich verifizieren willst, dass die Inputs nicht leer sind, kannst du für die Formularfelder auch das Attribut required verwenden.

 

[threadi]

Das aber nur wenn man auch HTML5-Dokumente schreibt.

Bei deinem JavaScript-Code solltest Du evtl. auch noch das Format der Eingabe im E-Mail-Feld prüfen. Also das mindestens @ und . darin vorkommen. Statt des alert-Fensters würde ich die fehlerhaften Felder auch vom Style her anpassen, also z.B. in die Beschriftung oder das Feld eine zusätzliche Klasse setzen die z.B. den Text rot macht.

 

[Tronjer]

Was sollte bei einer privaten Seite ohne Vorgabe des Doctypes gegen HTML5 sprechen?

Davon abgesehen dient die Frontend-Validierung in erster Linie der Usability. Logins oder gar Registrierungen sind unbequeme Prozesse, und nichts ist ärgerlicher, als auf fehlende oder fehlerhafte Eingaben erst nach dem Absenden des Formulars hingewiesen zu werden. Weil man vielleicht vergessen hat, die Box mit den AGB anzukreuzen und anschließend das Passwort oder gar Captcha noch einmal eingeben darf.

Um crossbrowser-kompatibel zu bleiben ist eine Validierung über JS natürlich die bessere Alternative. Aber in dem Fall sollte man dann auch auf RegEx überprüfen und onblur-Events einbauen.