Tutorial zur Eingabevalidierung von Formularen mit Hilfe von jQuery

Freitag, 13. Mai 2011

In diesem Tutorial soll gezeigt werden, wie man mit einigen simplen Zeilen Formulare auf Benutzereingaben reagieren lässt.

HTML- & CSS-Grundgerüst

Zuerst unser Formular als Grundgerüst in HTML mit einigen Formatierungen in CSS:

[html]
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>

<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<form id=“Formular“ method=“post“ action=“validate.php“>
<fieldset>
<legend>Ein einfaches Formular</legend>

<p>
<label for=“vorname“>Vorname<em>*</em></label>
<input type=“text“ id=“vorname“ name=“vorname“ size=“15″/>
</p>

<p>
<label for=“nachname“>Nachname<em>*</em></label>
<input type=“text“ id=“nachname“ name=“nachname“ size=“15″/>
</p>

<p>
<label for=“passwort“>Passwort<em>*</em></label>
<input type=“password“ id=“passwort“ name=“passwort“ size=“15″/>
</p>

<p>
<label for=“passwort2″>Passwort erneut<em>*</em></label>
<input type=“password“ id=“passwort2″ name=“passwort2″ size=“15″/>
</p>

</fieldset>
</form>
</body>
</html>
[/html]

So schaut unser Formular momentan aus:

jQuery-Plugins
Bevor wir unser Formular validierbar machen, sollten wir die benötigten jQuery-Plugins herunterladen:

http://code.jquery.com/jquery-latest.js
http://view.jquery.com/trunk/plugins/validate/jquery.validate.js

Diese werden später in unser Grundgerüst eingebunden.

Die Standard-Validierung
Das jQuery-Plugin bietet unterschiedlichste Konfigurations-Einstellungen. Wir wollen zuerst die einfachste Methode betrachten und auf die Standardausgaben zurückgreifen. Hierzu müssen wir im <head>-Bereich die beiden jQuery-Plugins einbinden. Der Code hierzu lautet:
[html]
<script type=“text/javascript“ src=“jquery-latest.js“></script>
<script type=“text/javascript“ src=“jquery.validate.js“></script>
[/html]
Zusätzlich müssen die Zeilen
[html]
<script type=“text/javascript“>
$(document).ready(function(){
$(„#Formular“).validate();
});
</script>
[/html]

in den <head>-Bereich eingefügt werden. Die validate()-Funktion werden wir im weiteren Verlauf unseren Vorstellungen anpassen. „#Formular“ ersetzen sie durch die id oder die class des zu validierenden Formulars.

Alles zur ready()-Funktion, die für jQuery nötig ist, können Sie hier nachlesen:

Introducing $(document).ready()

Das Überprüfen von Benutzereingaben folgt nun einfachen Regeln:

Sie fügen den jeweiligen <input>-Tags Klassen hinzu, anhand welcher Sie überprüft werden
Die wichtigsten hierbei sind wohl:

class=“required“: Feld muss gesetzt sein
class=“url“: Feld muss eine gültige URL enthalten
class=“email“: Feld muss eine gültige E-Mail enthalten
class=“required email“: Feld muss gesetzt und eine gültige E-Mail enthalten

Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind:

minlength=“int“ (Bsp.: minlength=“3″)
maxlength=“int“ (Bsp.: maxlength=“7″)
min=“int“ (Bsp.: min=“3″)
max=“int“ (Bsp.: max=“7″)
equalTo=“id“ (Bsp.: equalTo=“#passwort“)
range=“int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=“37″)

Durch Kombination von min und max ist es auch möglich eine Spannweite von möglichen Eingaben zu definieren. Das Attribut equalTo wird häufig in Bereich von Passwort- oder E-Mail-Überprüfung genutzt um dem Nutzer Tippfehler mitzuteilen.

Durch hinzufügen einiger Klassen schaut unser Formular nun folgendermaßen aus:

Die angepasste Validierung
Da wir eigene Regeln und eigene Nachrichten für die Validierung angeben möchten müssen wir die oben angesprochene validate()-Funktion bearbeiten.

Eigene Regeln aufstellen:
Zum Aufstellen von eigenen Regeln übergeben wir der validate()-Funktion als Parameter beispielsweise folgendes Konstrukt:

[javascript]
validate({
rules: {
vorname: „required“,
nachname: „required“,
passwort: {
required: true,
minlength: 6
},
passwort2: {
required: true,
equalTo: „#passwort“,
minlength: 6
},
email: {
required: true,
email: true
}
}
})
[/javascript]

Eigene Nachrichten definieren:
Eigene Nachrichten zu definieren folgt im Prinzip den gleichen Richtlinien wie die Definition eigener Regeln. Wir müssen für jede Regel eine eigene Nachricht angeben. Zugehörig zum Beispiel oben, könnten die Nachrichten wie folgt aussehen:

[javascript]
validate({
messages: {
vorname: „Bitte Vornamen angeben!“,
nachname: „Bitte Nachnamen angeben!“,
passwort: {
required: „Bitte Passwort angeben!“,
minlength: jQuery.format(„mindestens {0} Zeichen eingeben!“)
},
passwort2: {
required: „Bitte Passwort wiederholen!“,
equalTo: „Passwort wiederholen“,
minlength: jQuery.format(„mindestens {0} Zeichen eingeben“)
},
email: {
required: „Bitte E-Mail-Adresse eingeben!“,
email: „E-Mail im Format name@domain.de eingeben!“
}
}
})
[/javascript]

Mittels der angepassten Regeln und Nachrichten sieht unser Formular nun so aus:

Weitere Parameter der validate()-Funktion
– validate({ debug: true }): Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)
– validate({ submitHandler: function(){###} }): Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.

Noch einige weitere Parameter der validate()-Funktion können hier nachgelesen werden:
http://docs.jquery.com/Plugins/Validation/validate#options

Interessant sind dort vor allem die Möglichkeiten, wann das Formular validiert werden soll.
Hier gibt es auch ausführliche Beispiele zu den oben vorgestellten Parametern.

Hier geht es nochmal zum gesamten Quellcode: Eingabevalidierung