jQuery – Grundlagen der Formularvalidierung - PSD-Tutorials.de

[x]

Informationen

Neue Forenthemen

Ihr Partner mit Ideen

Anzeige

JQuery >> 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.

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.

Sorry, Mitgliederworkshops können nur angeschaut werden, wenn Du Mitglied bist !

Vorteile einer Mitgliedschaft auf PSD-Tutorials.de

Zugriff auf über 1700 Workshops mit druckbarer PDF-Datei
Zugriff auf über 500 Videoworkshops
Zugriff auf über 3000 Downloads um Photoshop & Co zu erweitern
Zugriff auf ein sehr aktives Forum - Antworten im Minutentakt
Mitgliedschaft ist kostenlos und kann jederzeit wieder gelöscht werden
und vieles mehr ...
30 Sekunden ... und schon bist Du Mitglied. Klicke hier

Dies ist die Textansicht vom Workshop. Als Mitglied siehst Du zusätzlich alle Bilder + PDF-Download + Arbeitsmaterialen-Download!

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]       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]       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.       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]       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.       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.

• Home • Member-Tutorials • Forum • Downloads • DVD • Sitemap
Premiumpartner: • photoshoptutorials.de • Pixelio.de • Webdesigner • Tutorials.de • piqs.de Lizenzfreie Bilder • flashhilfe.de • Fotobuch • Flashforum

Seite generiert in: 0.043 Sekunden