Anzeige
Tutorialbeschreibung

jQuery - Grundlagen der Formularvalidierung

jQuery - Grundlagen der Formularvalidierung

Auch auf dem Gebiet der Formularbehandlung weiß jQuery zu überzeugen. Vor allem die Kontrolle der von den Benutzern eingegebenen Werte stellt sich mit jQuery besonders komfortabel dar. Gerade hier wird der Vorteil gegenüber „normalem“ JavaScript deutlich. Denn will man dort z.B. ein E-Mail-Feld daraufhin überprüfen, ob tatsächlich eine E-Mail-Adresse eingefügt wurde, braucht man dafür sehr viel Code. Bei jQuery können Sie sich hingegen deutlich kürzer fassen. Neben den jQuery-Bordmitteln gibt es übrigens auch zahlreiche Plug-ins, mit denen die Formularvalidierung noch besser gelingt.


Wie wichtig Formularvalidierungen sind, merkt man vor allem dann, wenn man sehr viele falsch ausgefüllte Datensätze zugesendet bekommt. Manche Besucher schicken leere Formulare ab, während andere Besucher die Daten unvollständig eintragen. Mit beiden Varianten können Sie als Empfänger natürlich nichts anfangen. Vermeiden lassen sich solche unbrauchbaren Datensätze durch Validierung der Formulare bzw. der Formulardaten. Selbstverständlich lassen sich durch eine Validierung nicht alle fehlerhaften Eingaben aufdecken; ein Großteil wird allerdings durchaus erkannt.

In einer losen Folge von Tutorials werden die verschiedenen Möglichkeiten zur Formularvalidierung vorgestellt, die jQuery zu bieten hat. Den Anfang machen dabei die jQuery-Bordmittel. Später lernen Sie Plug-ins kennen, die noch einmal deutlich komfortabler, dafür dann aber auch etwas komplexer sind. Zunächst geht es darum, wie der Zugriff auf Formularelemente mittels jQuery realisiert werden kann. Die in diesem Tutorial gezeigten Ansätze bilden die Grundlage für aufwendige Validierungsvarianten.

Im ersten Beispiel soll ein Eingabefeld daraufhin überprüft werden, ob es einen Eintrag enthält. Das ist die einfachste Art der Validierung. Zunächst werden dafür das Formular, ein Eingabefeld und eine Senden-Schaltfläche angelegt.

<form method="post" action="" id="formular">
<input type="text" name="name" id="name" />
<input type="submit" name="Senden" />
</form>

 
Es fällt auf, dass den Elementen form und input jeweils eine ID zugewiesen wurde. Diese IDs werden für den Zugriff via jQuery benötigt.
[Beispiel anzeigen]

Bilder



 
Im nächsten Schritt muss die jQuery-Bibliothek eingebunden werden.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.4");
/* ]]> */
</script>

Entscheidend für die Validierung mit jQuery ist val(). Denn hierüber lässt sich der eingetragene Feldwert auslesen. Wie man val() einsetzt, zeigt das folgende Beispiel:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
  $(function() {
$('#formular').submit(function(){
if($('#name').val()=='') {
alert('Bitte tragen Sie Ihren Namen ein');
$('#name').focus();
return false;
}
});
});
});
 /* ]]> */
</script>

Im aktuellen Skript – und so wird das auch sonst üblicherweise gehandhabt – werden die Formulardaten mit dem Absenden des Formulars überprüft. Hierzu muss man das submit-Ereignis abfangen. Dazu wird die ID des Formulars übergeben.
$('#formular').submit(function()

Im nächsten Schritt muss festgelegt werden, was eigentlich überprüft werden soll. Das geschieht in Form einer einfachen if-Abfrage.
if($('#name').val()=='') {

 
Zunächst gibt man an, welches Element man überprüfen möchte. In diesem Fall handelt es sich um das Eingabefeld mit der ID name. Trifft die Bedingung val()=='' zu, wird ein Hinweisfenster angezeigt. Als Bedingung wurde bestimmt, dass der Inhalt des Feldes leer ist. Realisiert wird das Meldungsfenster über die alert()-Methode. Zusätzlich erhält das Eingabefeld den Fokus.
[Beispiel anzeigen]

Bilder



 
Die gezeigte Funktion hat eine entscheidende Schwäche: Momentan wird lediglich ein Eingabefeld überprüft. Was aber, wenn mehrere Felder vorhanden sind? Muss dann für jedes einzelne Feld eine solche Funktion definiert werden? Das Problem am aktuellen Beispiel ist die ID-Variante. jQuery kann hier allerdings Abhilfe verschaffen. Denn durch die entsprechenden Anweisungen lassen sich alle Elemente des gleichen Typs abfragen. Hier die wichtigsten Varianten:
  • $('input:text') – wählt alle Textfelder
  • $('input:radio') – wählt alle Radioboxen
  • $('input:checkbox') – wählt alle Checkboxen
  • $('input:password') – wählt alle Passwortfelder
  • $('input:submit') – wählt alle Absende-Schaltflächen

Auf diese Weise können Sie sehr einfach auf die entsprechenden Feldtypen zugreifen. Wie sich so etwas umsetzen lässt, zeigt das folgende Beispiel:
[Beispiel anzeigen]
 <form>
     <input type="file" name="datei" />
     <input type="hidden" name="versteckt" />
     <input type="password" name="passwort" />
     <input type="text" name="name" />
     <input type="text" name="vname" />
     <input type="text" name="email" />
 </form>
 <div id="ausgabe">
 </div>
 <script type="text/javascript">
 /* <![CDATA[ */
 window.onload = (function(){try{
    var felder = $(":input:text");
     $("#ausgabe").text(felder.length + " Textfelder sind vorhanden ");
     $("form").submit(function () { return false; });
  }catch(e){}});
 /* ]]> */
 </script>

 
Dieses Skript ermittelt die Anzahl der vorhandenen Texteingabefelder. Beachten Sie, dass es sich dabei tatsächlich um Felder des Typs <input type="text" /> handeln muss.

Bilder



 
Wie in jQuery üblich, können mehrere Selektoren durch Kommata voneinander getrennt notiert werden.

Im bisher gezeigten Beispiel wurden die Fehlermeldungen mittels der alert()-Methode ausgegeben. Das kann man so machen, sonderlich elegant ist das allerdings nicht. Oftmals ist es besser, wenn man auf sogenannte Inline-Texte zurückgreift. Diese werden nicht in einem Meldungsfenster, sondern direkt in der HTML-Seite angezeigt. Der Fehler wird jedoch nur dann ausgelöst, wenn der Cursor zuvor in das Feld gesetzt wurde. Sehen Sie sich zum besseren Verständnis das folgende Beispiel an:
[Beispiel anzeigen]

Bilder



 
Das ist die Seite im "Rohzustand". In das Feld sollen die Besucher ihren Namen eintragen. Verlassen sie bzw. der Cursor dieses Feld, ohne dass ein Name eingetragen wurde, löst das einen Fehler aus.

Bilder



 
Die Fehlermeldung wird dabei direkt neben dem Eingabefeld angezeigt. Das macht die Fehlersuche für die Besucher – vor allem natürlich bei sehr umfangreichen Formularen – deutlich einfacher. (Im aktuellen Beispiel wird allerdings auf den Event-Handler blur() gesetzt. Dadurch wird der Fehler ausgelöst, sobald der Cursor das Feld verlässt. Die Besucher werden also sofort auf den Fehler aufmerksam gemacht).

Zunächst der eigentliche HTML-Bereich.
<form method="post" action="" id="formular">
 <label for="name" id="beschreibung"><strong>Name*</strong></label>
 <input type="text" name="name" id="name" />
 <input type="submit" />
</form>

Der definierte Stern soll später – wenn ein Fehler ausgelöst wird – durch einen entsprechenden Hinweistext ersetzt werden. Das eigentliche Skript sieht folgendermaßen aus:
[Beispiel anzeigen]
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
  $(function() {
 $('#name').blur(function()
 {
 if ($(this).val() == '') {
 $('#beschreibung strong').html(' Geben Sie bitte Ihren Namen an.');
 }
 else {
 $('#beschreibung strong').html('');
 }
 });
 });
});
 /* ]]> */
</script>

Als Ereignis wird blur() gewählt. Über die if-Abfrage überprüft man, ob das Feld leer ist. Dabei greift man mit ($(this) immer auf das aktuelle Formularfeld zu. Anschließend soll der Stern durch die Fehlermeldung ersetzt werden. Werfen Sie dafür zunächst noch einmal einen Blick auf die betreffende HTML-Syntax:
<label for="name" id="beschreibung">Name<strong>*</strong></label>

Interessant ist dort der Inhalt des strong-Elements. Darauf wird folgendermaßen zugegriffen:
$('#beschreibung strong').

Dem Inhalt, der angezeigt werden soll, wenn das Feld leer ist, weist man html() zu. Wurde ein Name in das Feld eingetragen, greift der else-Zweig. Dieser sorgt dafür, dass der Stern aus dem Formular gelöscht wird. Das signalisiert dem Besucher, dass das Feld korrekt ausgefüllt wurde.


Fazit

Die ersten Schritte auf dem Weg zu Formularvalidierungen sind gemacht. Diese Grundlagen werden Ihnen bei der weiteren Arbeit an und mit jQuery-basierten Formularen behilflich sein.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von computer72
  • 22.07.2010 - 15:18

Toller Einstig in jQuery.
Gut beschrieben.

Portrait von sot_ware
  • 12.03.2010 - 17:41

Super! Eine zusätzliche clientseite Validierung ist viel angenehmer als wenn die Seite neu geladen werden müsste. -> Alle Felder leer.

Portrait von websmurf
  • 12.03.2010 - 08:58

Ein guter Einstieg. Mit JavaScript lässt sich die Usability von Formularen deutlich verbessern. Z.B. durch farbliche Markierung, welche Felder noch ausgefüllt werden müssen. Wer JS nicht an hat, bekommt immer noch das "normale" Formular. Ein Tutorial dazu wäre sehr interessant. ;o)

Die Prüfung der Pflichtfelder sollte allerdings immer Serverseitig erfolgen, damit Sie auch beu ausgeschaltetem JavaScript funktioniert.

Portrait von dlogic
  • 12.03.2010 - 03:59

Ob nun Server- oder Clientseitig das ist hier nicht das Thema.... da ich jedenfalls in letzter Zeit verstärkt jQuery PlugIns verwende ist das Tutorial sehr hilfreich.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.03.2010 - 06:46

@foto_karlil
Ich finde Validierungen sollten immer clientseitig (Javascript) und serverseitig (PHP) durchgeführt werden.
Die Usibility eines Formulars wird durch den Einsatz von Javascript stark verbessert.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.03.2010 - 17:37

Naja, was ist bei abgeschaltetem JS? Ich denke solche Überprüfungen sollten nicht mit JS gemacht werden. PHP halte ich hier für deutlich sinnvoller. JS wird immer öfter von Usern abgeschalten und dann?

Portrait von Crackp0t
  • 08.03.2010 - 12:23

Schön beschrieben, genau das richtige zum Einstieg. Würde mich über eine Fortsetzung mit Einbindung von datenbankabfragen freuen. :)

x
×
×