ESA 2012.A8: Formulardaten-Validierung für SDI/MDI

Aufgabe: "From Scratch" ist eine einfache, robuste Formulardaten-Validierungs-Bibliothek zu schreiben und zu testen. Der Quelltext von Validierung (SDI, einfach) enthält Anregungen, ist aber nicht fehlerfrei.

Was meint Validieren? Bei Seiten, bei Formularen?

Ein "Verifizieren" entspricht einer Bestätigung (Beglaubigung) und will die Wahrheit einer Aussage feststellen. Ein "Validieren" (vom französischen valider) entspricht einem "vergewissern" und möchte die die Wichtigkeit, Zuverlässigkeit und Gültigkeit von Werten feststellen (siehe z.B. de.wikipedia HTML Element ).

Einführendes zur Formularen Formularen-Daten prüfen?

Beim clientseitigen und serverseitigem Pprogrammieren sind Kentnisse zu den Zugriffsmethoden auf Formalar-Elemente unerläßlich, siehe z.B. clientseitige Formularzugriffe .

Severseitig sind i.a. stets Prüfungen der übermittelten Formular-Daten notwendig. Auf der Clientseite wird i.a. versucht, eine Übermittlung (Senden, Submit) von unvollständigen, fehlerhaften und unerwünschten Formular-Daten ("Code-Injektion") zum Server zu vermeiden. Eine (Vor-) Prüfung der Formular-Daten erfolgt auf der Client-Seite (mit ECMAScript oder bei HTML5 ohne ECMAScript).

• Seite validieren: Die w3.org-Validierung von Web-Seiten kann mit einem Validierer erfolgen.
• Formular validieren: Das Validieren eines Formulares braucht einen Validierer, der die Formulardaten prüft. Typischer Weise erfolgt dies bei Textdaten mit Hilfe von Regulären Ausdrücken, wie z.B.

  //PHP:
  '/^(|[^@]+@[^@]+\.[^@]{2,})$/'    leer oder E-Mail-Adresse
  '/^.{5,20}$/s'                    mind 5 und max 20 Zeichen
  '/^([a-f0-9]{6})$/i'              sechsstellige Hex-Zahl
  
  // ECMAScript:
  /[0-9]{5}/                          Postleitzahl
  /[a-zA-Z0-9]+/                      Alpha-Numerisch
  /\d+(\.\d{2})?/                     Euro-Wert
  /^[a-zA-Z][a-zA-Z0-9-_\.]{5,20}$/   Alpha-Numerisch mind 5 und max 20 Zeichen
  /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/ 
                        min 8 Zeichen und Upper-/LowerCase, Number/SpecialChar 
  

HTML 5 und pattern-Attribut Was meint placeholder, required?

Beim clientseitem Validieren von Formular-Daten (z.B. required: -IE, -Safari; pattern: -IE, -Safari; placeholder: -IE; ) gibt es 2012 ein "Browser Support Dilemma" ( siehe z.B. en.wikipedia Comparison of web browsers und Form-elements-and-attributes Table )

Dennoch soll das folgende Lehrformular die (derzeitige) Nutzung zeigen. Teste:

 <form action="#"
       onsubmit="alert('PLZ='+this.PLZ.value);return false;">

 <input type="text" name="PLZ"
        required="required"
        placeholder="Postleitzahl"
        pattern="\s*[0-9]{5}\s*"
        title="Es müssen genau 5 Ziffern sein" />  
 <input type="submit" value="Anzeigen"  />        
 </form>

Für Formular-Daten sieht HTML 5 die input typen: text, search, url, tel, email und password das pattern-Attribut vor, dir ggf. der Validierung der Formulardaten dienen können.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr