JavaScript Pflichtfelder

[affe2009]

Hallo,

ich habe mir ein Registirerungsformular in HTML gemacht, welches mithilfe von JavaScript auf Pflichtfelder überprüft werden soll.
Dies funktionerit auch soweit gut.
Wenn ich nur das letzte Pflichtfeld ausfülle, dann auf absenden klicke, leitet er mich trotzdem weiter. Dies passiert nur beim letzten Pflichtfeld.
Ich habe alles schon ausprobiert und komme nicht auf den Fehler.
Um hilfe wäre ich sehr dankbar.

HTML-Formular:

<form name="Registrierungsformular" action="registrierung.php" method="post">
<pre>
<span id="error" style="display: none">Bitte alle Pflichtfelder ausf&uuml;llen!</span><br><br>
Anrede:			<input style="border:1px solid blue" type="text" size="40" name="anrede"><br>
Vorname:*		<input style="border:1px solid blue" type="text" size="40" name="vorname" class="pflichtfeld"><br>
Nachname:*		<input style="border:1px solid blue" type="text" size="40" name="nachname" class="pflichtfeld"><br>
Straße:*		<input style="border:1px solid blue" type="text" size="40" name="strasse" class="pflichtfeld"><br>
Hausnummer:*		<input style="border:1px solid blue" type="text" size="40" name="hausnummer" class="pflichtfeld"><br>
PLZ:*			<input style="border:1px solid blue" type="text" size="40" name="plz" class="pflichtfeld" maxlength="5"><br>
Wohnort:*		<input style="border:1px solid blue" type="text" size="40" name="wohnort" class="pflichtfeld"><br>
Geburtsdatum:*		<input style="border:1px solid blue" type="text" size="40" name="geburtsdatum" class="pflichtfeld"><br>
Telefon:		<input style="border:1px solid blue" type="text" size="40" name="telefon"><br>
Handy:			<input style="border:1px solid blue" type="text" size="40" name="handy"><br>
E-Mail:*		<input style="border:1px solid blue" type="text" size="40" name="email1" class="pflichtfeld" id="email1"><br>
E-Mail-Bestätigung:*	<input style="border:1px solid blue" type="text" size="40" name="email2" class="pflichtfeld" id="email2"><br>
Passwort:*		<input style="border:1px solid blue" type="password" size="40" name="passwort1" class="pflichtfeld" id="pw1"><br>
Passwortbestätigung:*	<input style="border:1px solid blue" type="password" size="40" name="passwort2" class="pflichtfeld" id="pw2"><br>
Sicherheitsfrage:*	<input style="border:1px solid blue" type="text" size="40" name="sicherheitsfrage" class="pflichtfeld"><br>
Antwort:*		<input style="border:1px solid blue" type="text" size="40" name="antwort" class="pflichtfeld"><br>
<input type="submit" onClick="return CheckFormular();" value="Absenden">
</pre>
</form>

JavaScript-Funktion:

function CheckFormular()
{
    var alleFelder = document.getElementsByTagName('*');
    var error = document.getElementById('error');
    var NoError; 
    for (var i = 0; i < alleFelder.length; i++) 
    {
        var thisElem = alleFelder[i];
        if (thisElem.className && thisElem.className == 'pflichtfeld') 
        {
            if(thisElem.value == "")
            {
                error.style.display = "inline";
                thisElem.style.border = "1px solid red"; 
                NoError = false; 
            }
            else
            {
                error.style.display = "none";
                thisElem.removeAttribute("style"); 
                thisElem.style.border = "1px solid blue"; 
                NoError = true; 
            }
        }
		
    }
    if (document.forms[0].plz.value.length>0)
    {
        if (document.forms[0].plz.value.search(/^[0-9]{5}$/)>-1)
        {
            
        }
        else
        {
            alert("Bitte geben Sie eine gültige PLZ ein!");
        }
    }
	Passwort1 = document.getElementById("pw1").value;
    Passwort2 = document.getElementById("pw2").value;
	if (Passwort1 != Passwort2)
	{
	    alert ("Die Passwörter stimmen nicht überein!");	
	}
	Email1 = document.getElementById("email1").value;
    Email2 = document.getElementById("email2").value;
	if (Email1 != Email2)
	{
	    alert ("Die E-Mail-Adressen stimmen nicht überein!");	
	}
    return NoError;
}

 

[CPoly]

Ist doch logisch, du überschreibst dir "NoError" bei jedem Durchlauf. Initalisier es sinnvoll

var NoError = true;

Und in der Schleife lässt du die Zuweisung von "true" komplett weg und lässt nur die für "false" stehen. Wenn es einmal false ist, sollte es das auch bleiben

 

[affe2009]

stimmt. danke für die informationen, darauf hab ich jetzt gar nicht mehr geachtet.
Noch eine frage hätte ich.
ich will dass das formular überprüft, ob ein @ zeichen vorhanden ist oder nicht.
danke

 

[affe2009]

aber wenn ich auf absenden klicke, dann markiert er mir die pflichtfelder rot und als überschrift steht "Bitte alle Pflichtfelder ausfüllen!".
Wenn ich nur das letzte pflichtfeld ausfülle und auf absenden klicke, bleiben zwar die rote felder markeirt aber die überschrift "Bitte alle Pflichtfelder ausfüllen!" kommt nicht beim ltzten feld.
danke

 

[CPoly]

1. Mit "indexOf" kannst du gucken, ob irgendwo ein @ drin ist.
2. Das ist doch exakt das gleiche Problem wie mit dem NoError. Nimm "error.style.display = "none"; " raus, denn einmal sichtbar, sollte es auch sichtbar bleiben. Am besten setzt du das erst nach der Schleife. Du hast ja dann in NoError drin stehen, ob es geklappt hat.