PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Unicode Shopping

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt1
Heute243
Gestern239
Gesamt1684446

Formularprüfung

Autor Flitze
Klicks 11704
Bewertungen 12
Rating 3.9
Stand 01.12.2013
Keywords:
Formulare, Vollständigkeit, Länge, Eingabefelder, Checkboxen, Fehlerausgabe, vor dem Senden, Abschicken, prüfen, checken, ausgeben

Amazon: JavaScript: Einf�hrung - Referenz
Breadcrumb:
Tipps » Formularprüfung
Seite : 1 Bewerten
Article Wizard - deutscher Article SpinnerBei diesem Tipp zeige ich euch eine Möglichkeit auf, Formulardaten mittels JavaScript vor dem Übetragen der Daten zu überprüfen. Der Vorteil dabei liegt zum einen in der Geschwindigkeit und zum anderen in der Erhaltung der Daten. Dadurch, dass die Daten nicht erst an den Server gesendet werden müssen, bekommt der User sofort eine Nachricht bezüglich der Fehlermeldungen. Da die Daten bei fehlerhafter Eingabe gar nicht erst gesendet werden, bleiben sie auch weiterhin in dem Formularfeld und müssen nicht erneut eingegeben werden.

Zur Realisierung habe ich zwei Funktionen entwickelt:
1. trim()
Code:
    function trim (str) {
        return (str.replace("\s+$","").replace("^\s+",""));
    }



Diese Funktion entspricht in etwa der PHP-Funktion trim(). Diese entfernt Whitespaces am Anfang und am Ende eines Strings.

2. checkEingaben()
PHP:
    // Prüft die Eingabe von Daten in Formularen
    function checkEingaben(formular, felderstring, ausgabestring)
    {

         // Aufteilen des Felderstrings, enthält die Namen der zu prüfenden Felder
         var felder = felderstring.split(",");
         if(trim(ausgabestring)=='')
             ausgabestring = felderstring;
         // Aufteilen des Ausgabestrings, enthält den Ausgabetext für die Fehlermeldung
         var ausgabe = ausgabestring.split(",");
         var errors = new Array();
         for (var key in felder){
              // Prüft, ob in ein Eingabefeld etwas eingegeben wurde oder, falls es sich um eine checkbox handelt, ob diese aktiviert wurde
                  if(document.forms[formular].elements[felder[key]] &&
                     (trim(document.forms[formular].elements[felder[key]].value) == "" ||
                      (document.forms[formular].elements[felder[key]].type == 'checkbox' &&
                       document.forms[formular].elements[felder[key]].checked != true )
                      )
                     )
                     errors[errors.length] = ausgabe[key];

         }
         // wurde in einem Feld, dass überprüft werden soll, keine Eingabe gemacht,..
         if(errors.length != 0){
             var errorString = "";
                 // ..wird eine entsprechende Fehlermeldung generiert
                 for(error in errors)
                     errorString += errors[error] + "\n";
        alert("Bitte füllen Sie folgende Felder aus:\n" + errorString);
             return false;
         }
         return true;
    }


Die Funktion führt die eigentliche Prüfung durch. Sie erwartet drei Parameter
Code:
function checkEingaben(formular, felderstring, ausgabestring)

formular
enthält das name-Attribut des zu prüfenden Formulars

felderstring
enthält die name-Attribute der zu prüfenden Elemente

ausgabestring
enthält die Ausgabenamen für die Fehlermeldung

Im felderstring und ausgabestring werden die Namen der einzelnen Eingabe-Elemente durch ',' getrennt übergeben. Wenn man für ausgabestring einen leeren string '' übergibt, ensprechen die Ausgabenamen in der Fehlermeldung den Namen der Eingabe-Elemente.
Beide Strings müssen gleich viele durch ',' getrennte Namen bekommen.

Mittels split werden die beiden Strings nach jedem ',' getrennt und die Teilstrings in einem Array gespeichert. Dann wird ein Fehlerarray erzeugt, in dem evtl. auftretende Fehlermedungen gespeichert werden.

PHP:
var errors = new Array();


Durch eine for-in-Schleife werden dann alle Elemente nacheinander geprüft.

PHP:
document.forms[formular].elements[felder[key]]
// prüft, ob das Element überhaupt existiert

trim(document.forms[formular].elements[felder[key]].value) == ""
// prüft unter Verwendung von trim, ob das Element leer ist

document.forms[formular].elements[felder[key]].type == 'checkbox' &&
document.forms[formular].elements[felder[key]].checked != true
// prüft, ob das Elemnt eine Checkbox ist und falls ja, ob sie gecheckt wurde


Tritt ein Fehler auf, wir der Ausgabename im Fehlerarray gespeichert

PHP:
errors[errors.length] = ausgabe[key];


Nachdem alle Elemente geprüft wurden, wird überprüft, ob irgendwo ein Fehler auftrat. Falls dies der Fall ist, wird eine entsprechende Fehlermeldung generiert und false zurückgegeben.

PHP:
    if(errors.length != 0){
        var errorString = "";
        for(error in errors)
            errorString += errors[error] + "\n";
        alert("Bitte füllen Sie folgende Felder aus:\n" + errorString);
        return false;
    }


Wurde kein Fehler gefunden, gibt die Funktion true zurück.

Der Aufruf im Formular sieht folgendermaßen aus:
Code:
<form name="Gaestebuch"
      action="index.php?section=gaestebuch"
      method="post"
      accept-charset="ISO-8859-1"
      onSubmit="return checkEingaben('Gaestebuch', 'Name,Inhalt', 'Name,Nachricht')">
Name*: <input type="text" name="Name"><br>
Email: <input type="text" name="Email"><br>
Homepage: <input type="text" name="Homepage"><br>
Nachricht*: <textarea name="Inhalt"></textarea>
</form>


Den Einsatz dieser Funktion könnt ihr z.B. unter Gästebuch testen.

Anmerkung

Ihr solltet euch bei der Formularprüfung aber NIE nur auf Javscript verlassen, da Javascript vom Anwender deaktiviert werden kann. Eine serverseitige Prüfung der Daten ist daher unerlässlich. Ein Tutorial dazu findet ihr unter Formularprüfung. Falls ihr eher der Java-Programmierer seid, dann hilft euch dieses Java Tutorial zu Formularprüfung weiter. Das Java != JavaScript ist, muss ich hoffentlich nicht noch extra erwähnen ;)

  Bewerten

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8.1

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (25)

8.4
7.2
6.6

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2017