Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Formularüberprüfung mittels JavaScript



Ranking: 0   Kommentare: 1   |   Bewertung: Keine Berechtigung!  

Gut, ich werde mal schnell drauf eingehen, wie man formulareingaben auf ihre Richtigkeit überprüft.
Dazu muss man wissen:
JavaScript sieht eine Seite als Verschachtelung in verschiedenen levels, das Ganze wird DOM (Dokument Object Model) genannt... Also, zB folgende Seite in HTML

Code:




<html>

<body>

<ol id="Order">

<li id="one">Listenelement 1</li>

<li id="two">Listenelement 2</li>

</ol>

</body>

</html>




wird von Javascript als eine Verschachtelung verschiedener Elemente gesehen. Oberstes Level is der Body, im Body liegt die Schachtel ol, in dieser Schachtel sind gleich 2 schachteln, der erste li tag und der 2te liTag.
Man kann Tags also als schachteln sehen, während der text (Listenelement 1 + 2) als Inhalt der Boxen zu sehen ist.
Wenn ich jetzt wissen will, was in der ersten lischachtel ist, muss ich der reihe nach die schachteln öffnen. Das geht auf verschiedene weisen, am einfachsten ist es, wenn die Schachteln einen namen haben (id).
In dem obigen Beispiel wäre das jetzt dann document.Order.one
Jede ebene ist fein säuberlich duch Punkte getrennt. damit hab ich zwar jetzt die letzte schachtel geöffnet weiß aber noch nicht was drin ist, dazu muss ich eine weitere Ebene öffnen, genannt value (wert)
also im ganzen: document.Order.one.value

Gut, jetzt weiß ich schonmal, wie ich auf inhalte zugreifen kann.

Nehmen wir jetzt an, wir haben folgendes Formular

Code:




<html>

<body>

<form action="mailto:mir@home.de" method="post" id="dataform" onsubmit="return isValid()">

<div>

    <label for="username">Username</label>

    <input type="text" name="username" id="username" title="Username" />

</div>

<div>

    <label for="passwort">Passwort</label>

    <input type="password" name="passwort" id="passwort" title="passwort" />

</div>

<div>

    <label for="repeatpasswd">Passwort(2x)</label>

    <input type="password" name="repeatpasswd" id="repeatpasswd" title="repeatpasswd" />

</div>

<div>

    <label for="plz">Postleitzahl</label>

    <input type="text" name="plz" id="plz" size="4" title="plz" />

</div>    

<div>

    <label for="alter">Alter</label>

    <input type="text" name="alter" id="alter" title="Alter" />

</div>

<div>

    <label for="email">E-Mail</label>

    <input type="text" name="email" id="email" title="E-Mail" />

</div>

<div>

        <fieldset>

    <legend>Interessen</legend>    

        <p>Sport</p><input type="checkbox" name="interessen" value="sport" />

        <p>Musik</p><input type="checkbox" name="interessen" value="musik" />

        <p>Film</p><input type="checkbox" name="interessen" value="film" />

        <p>Party</p><input type="checkbox" name="interessen" value="party" />

        <p>Compute</p>r<input type="checkbox" name="interessen" value="computer" />

        </fieldset>

</div>

<div>

    <input name="absenden" type="submit" value="Absenden" title="Absenden" />

    <input name="reset" type="reset" value="Zur&uuml;cksetzen" title="Zurücksetzen"/>

</div>

</form>



</body>

</html>



Ich habe darin jetzt ein paar formularfelder verschiedenen Typs drin, damit man mal alles kennen lernt.
Im HTMLcode muss das Javascript eingebunden werden, dass kann ich im Dokument selbst machen, oder einfach eine Javascriptdatei importieren (<script src="scripts.js" type="text/javascript"></script>)

Nun, um eine überprüfung beim absenden zu erreichen muss man definieren, dass beim absenden (onSubmit) eine Funktion isValid abgerufen wird. In dieser Funktion holen wir uns erst mal alle daten und speichern sie in Variablen:

var pass = document.forms.dataform.passwort.value;
ich öffne dabei folgende Boxen: Erst das Dokument selbst, dann dessen Formularbox (da sind die Formulare drin), darin die Box mit dem Formular, das dataform heißt, dort das Feld, das passwort heißt, und dessen inhalt...
Wenn ich jetzt dort "geheim" eingebe, und absenden will, ist der wert von pass = "geheim".
Das kann ich jetzt mit allen elementen machen.
Dann fängt der Vergleich an. Via Ifanweisungen kann ich Passwörter vergeichen, emails überprüfen etc...
Ich unterscheide da 3 typen der überprüfung:

1.Überprüfung auf gleichheit

Ist Passwort 1 gleich Passwort 2?

Code:


if (passwort1 !=passwort2) {

fehlermeldung ausgeben (zB. Alert (Passwörter sind nicht ident)

}



2. Überprüfung auf Länge

Dazu verwende ich eine methode, die die länge der variable ausgibt, einfach an die variable dranhängen (zb passwort.length)

Code:


if (passwort1.length<5) {

fehlermeldung ausgeben (zB. Alert (Passwort zu klein)

}


Dadurch kann man auch gleich nachsehen, obs überhaupt ausgefüllt ist (if x == 0) )

3. Überprüfung auf Charakter

Ist bei der emailadresse ein @ zeichen?

email.value.indexOf("@") gibt einen Integerwert zurück, an welcher position es ist, ist die position -1, fehlt das zeichen

Code:


if(email.value.indexOf("@") == -1){

fehlermeldung

}




Damit sollte sich schon einiges machen lassen, ich habe jetzt mal einen beispielhaften Code für das Formular oben angegeben, damit man sich ansehen kann, was man machen kann, und wie es geht

Code:


function isValid() {

    // Text, der im Fehlerfall ausgegeben wird

    var errMsg = "";



    // Name ist Mussfeld

    if (document.forms.dataform.username.value.length == 0) {

        errMsg += "Bitte Namen eingeben.n";

    }



    // Passwoerter überprüfen

    if (document.forms.dataform.passwort.value.length == 0){

        errMsg += "Bitte Passwort eingeben.n";

    var pass = true;

    }  else if (document.forms.dataform. passwort.value.length < 5){

        errMsg += "Das Passwort muss mindest 5 Zeichen haben.n";

    var pass = true;

    } 

        

    //Passwoerter vergleichen

    var pass1 = document.forms.dataform.repeatpasswd.value;

    var pass2 = document.forms.dataform.passwort.value;



    

if (pass1 != pass2 && pass != true){

        errMsg += "Die Passwörter stimmen nicht miteinander überein.n";

    }

    

    // Alter muss Zahl sein

    if (isNaN(parseInt(document.forms.dataform.alter.value))) {

        errMsg += "Bitte ein numerisches Alter eingeben.n";

    var    age = true;    

}





    //Alter muss zwischen 10 und 99 leigen

    if(age != true &&(document.forms.dataform.alter.value < 10 || document.forms.dataform.alter.value > 99)){

    errMsg+= "Das Alter muss zwischen 10 und 99 liegen.n";

    }



    //POSTLEITZAHL CHECKEN



    if(document.forms.dataform.plz.value.length != 4){

    errMsg += "Sie müssen eine 4 Stellige PostLeitzahl einfügen.n";

    var plz  = true;

    }

        

    if(plz != true && isNaN(parseInt(document.forms.dataform.plz.value))){

    errMsg += "Bitte geben Sie eine numerische Postleitzahl ein.n";

    }



    // TODO: E-Mail-Adresse muss '@' enthalten

    if (document.forms.dataform.email.value.indexOf("@") == -1) {

        errMsg += "Bitte gueltige E-Mail-Adresse eingeben.n";

    }

    var check=0;



    if((document.forms.dataform.interessen[0].checked) == true){

    check++;

    }

    if((document.forms.dataform.interessen[1].checked) == true){

    check++;

    }

    if((document.forms.dataform.interessen[2].checked) == true){

    check++;

    }

    if((document.forms.dataform.interessen[3].checked) == true){

    check++;

    }

    if((document.forms.dataform.interessen[4].checked) == true){

    check++;

    }



    if(check <2){

    errMsg += "Bitte wählen Sie zumindest zwei Interessen aus.n";

    }





    // falls Fehler aufgetreten sind ...

    if (errMsg.length > 0) {

        // ... diese ausgeben ... 

        window.alert(errMsg);

        // ... und das Formular nicht abschicken

        return false;

    }

    else {

        // ... wenn alles OK, Formluar abschicken

        return true;

    }

}



Veröffentlicht von: kingG
Veröffentlicht am: 9 Feb. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: absenden Formular javascript überprüfen


Themenverwandte Tutorials


Kommentar(e) (1)


deleted_1300463630 sagt:

Hat jemand mal ein Beispiel bzw. eine demo ?

18 May. 2008 13:50:12 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder