Blog - webdesign, javascript, jquery, html, css, php

In diesem Beitrag werde ich versuchen die Theorie hinter den Formularen zu erklären. Es geht darum wie man Daten richtig validiert und benutzerfreundliche Fehlermeldungen ausgibt.

Herkömmliche Formulare sind meistens so aufgebaut:

01:

HTML Formular



02:

POST Daten verarbeiten



03:

Bei Fehler:

Fehlerausgabe



Bei Erfolg:

Daten speichern oder verschicken

Das Problem an dieser Methode ist das falls es zu einer Falscheingabe gekommen ist man per zurück Link die Eingabe von vorne Beginnen muss. z.B. "Bitte alle Felder ausfüllen" oder "Passwörter stimmen nicht überein"

Solche ausgaben und das damit verbundene erneute Eingeben aller Daten verschrecken auch den gewilltesten User.

Um diesen Problem entgegenzuwirken muss der Aufbau des Scripts grundlegend geändert werden.

01:

POST Daten verarbeiten



02:

HTML Formular



03:

Daten Speichern

Gehen wir ins Detail:

01:

POST Daten verarbeiten

Manch einer wird sich jetzt fragen wie man die Daten verarbeiten will bevor man sie abgeschickt hat? Mit einer simplen If abfrage wird überprüft ob POST Daten existieren oder nicht. Wurden bereits POST daten gesendet wird nun jeder Wert auf den gewünschten Inhalt überprüft. Bei jedem Fehler wird unser "errors" Array erweitert um später im Formular die passende Fehlermeldung auszugeben.

02:

HTML Formular

Im Formular selbst müssen nur geringfügige Änderungen vorgenommen werden. Man gibt jedem Feld als "value" nun sich selbst. z.b:

echo "<input name='adresse' value='".$_POST['adresse']."' />";

Falls ein Fehler bei der Validierung aufgetreten ist und in dem "errors" Array gespeichert wurde und das Formular erneut angezeigt wird haben somit alle Felder die bereits eingegeben Daten.

Wie bereits erwähnt wird das Formular angezeigt falls keine POST Daten vorhanden sind oder bei der Verarbeiten jener ein Fehler in den Array gespeichert wurde. Wie und Wo man die Fehlermeldung im Formular ausgibt ist jedem selbst überlassen. Ich bevorzuge die Felder anders einzufärben da jedes Feld prinzipiell eine Erklärung haben sollte welche Eingabe in welcher Form erwartet wird (z.B: a-z,0-9, 6 - 13 Zeichen).

03:

Daten speichern

Was genau in diesem Punkt geschieht ist oft verschieden. Je nach Formular kann hier eine E-Mail versendet, ein Datenbankeintrag erstellt oder eine Zusammenfassung ausgegeben werden.

Kommen wir zur theoretischen Zusammenfassung:

01:

-> POST Daten vorhanden

POST Daten verarbeiten

Fehler in Array schreiben



-> Keine POST Daten vorhanden

dieser teil wird übersprungen



02:

-> POST Daten vorhanden && "errors" Array ist leer

dieser teil wird übersprungen

-> Keine POST Daten vorhanden oder "errors" Array ist nicht leer

HTML Formular ausgeben



03:

-> POST Daten vorhanden && "errors" Array ist leer

Daten Speichern

• Veröffentlicht:
• 17.02.2009
• Author:
• Mathias Schübel
• Permalink:
• http://www.schuebel-webdesign.de/blog/23

zurück zum Blog