Validieren von Formular-Eingaben (SDI) Beispiele formular-validieren

Eine Übermittlung von HTML-Formular-Daten zum Server kann unerwünscht sein, wenn bestimmte Eingaben unbrauchbar sind. Eine Prüfung Daten kann auf der Client- oder/und der Server-Seite erfolgen. Nachfolgend wird eine clientseitige Prüfung der Daten (ECMAScript) behandelt.

Form-Eingabe-Unterstützung für HTML5-Elemente

Beispiele:

Vorname:     <input type="text" name="NAME" required />
E-Mmail-Adr: <input type="email" name="email" required placeholder="Gültige E-Mail-Adr" />
Website-URL: <input type="url" name="URL" required pattern="https?://.+" />
Zahlenwert:  <input type="number" size="6" name="WERT" min="18" max="99" value="21" />
Bereich:     <input type="range" size="2" name="BEREICH" min="1" max="5" value="3" />
<input type="submit" value="Submit" />

Vorname:     
E-Mmail-Adr: 
Website-URL: 
Zahlenwert:  
Bereich:     

Clientseitige Prüfungen von Formular-Eingabedaten ECMAScript aggiert vor dem Wegschicken ...

Oft sind Eingabedaten nur dann sinnvoll verwendbar, wenn diese Daten bestimmten formalen Anforderungen genügen. Z.B. muss eine E-Mail-Adresse zumindest das "@"-Zeichen enthalten, eine Telefon-Nummer besteht aus Ziffern, usw. Eine Prüfung der eingegebenen HTML-Formmular-Daten kann auf der Client- oder/und der Server-Seite erfolgen.

Die clientseitige Formular-Prüfung vermeidet eine unnötige Netzlast, "schont die Augen" und ist schneller (Übertragungszeit). Auch kann z.B. der Cursor/Caret auf die fehlerhafte Eingabestelle positioniert werden. Die clientseitige Formular-Prüfung verwendet ECMAScript (Browser) um die Formularelement-Eingaben zu prüfen.

Z.B. kann bei einem Klick auf den submit-Button eines Formulars zunächst onsubmit="return meine_pruefungen(this)" aufgerufen werden. onsubmit="..." gehört in das form-Tag. Gibt die meine_pruefungen()-Funktion false zurück, so wird kein action = "..."-Ereignis ausgelöst, d.h. onsubmit="return false;" verhindert die HTTP-Übermittlung der Formulardaten zum Server.

Typisches HTML-Formular Wie sieht ein typisches HTML-aus?

Das folgende Formular dient dazu, etwas konkretes "vor Augen" zu haben. Durch eine Klick auf den submit-Butten werden die Formular-Daten mit dem HTTP-POST-Protokoll an den Server übermittelt. Vereinfacht ausgedrückt erhält der Server die zu (name, value) gehörenden Werte-Paare. PHP stellt diese Werte-Paare in dem super-globalen $_POST-Array zur Verfügung.

Die durchgestrichene Zeile weist darauf hin, daß die Datenübermittlung (ohne ECMAScript) durch den submit-Button ausgelöst wird. Eine clientseitige Validierung braucht (ohne HTML5) ECMAScript.

Soll eine clientseitige, erfolgreiche Validierung "erzwungen" werden, so kann die Datenübermittlung durch einen 'nicht-submit'-Button ausgelöst werden, indem die ECMAScript-Funktion .submit() die Datenübermittlung startet. In diesem Fall wird kein submit-Button benötigt. Ist beim Browser ECMAScript deaktiviert, so erfolgt keine Daten-Übermittlung. Eine Datenübermittlung kommt nur bei aktiviertem ECMAScript und erfolgreicher Validierung zustande.

name="NAME" value="  Maier, Hans"
name="ORT"  value="D-xxxxx MeinWohnort"
name="TEL"   value="12345678 abc"
name="EMAIL" value="aa@bb.cc"

Code Snippet: HTML-Quelltext für ein Formular

1. <form name="FORM" method="post" enctype="multipart/form-data"
2.     action = "javascript:alert('Jetzt wird \'action=...\' ausgeführt');">
3. <pre>
4. Herr <input type="radio" name="RADIO" checked="checked"/>
5. Frau <input type="radio" name="RADIO" />
6. Nachname, Vorname <input type="text" name="NAME" value="  Maier, Hans" />
7. PLZ und Wohnort   <input type="text" name="ORT" value="D-xxxxx MeinWohnort" />
8. Telefon-Nummer    <input type="text" name="TEL" value="12345678 abc" />
9. E-Mail-Adresse    <input type="text" name="EMAIL" value="aa@bb.cc" />
10. <input type="checkbox" name="WONT_INFO" checked="checked"/> INFO
11.                    <textarea name="INFO" rows="3" cols="15"
12.                     style="width:300px !important">...</textarea>
13. Abschicken mit 'submit' <input type="submit" name="__SUBMIT" value="Submit " />
14. Abschicken mit 'button' <input type="button" name="__SENDEN" value="Senden" />
15. </pre>
16. </form>

onsubmit-Ereignis (form-Tag) Wozu wird onsubmit gebraucht?

Ein form-Tag kann eine onsubmit=...-Attribut enthalten. Ein Klick auf den submit-Button löst (bei aktiviertem ECMAScript) das onsubmit-Ereignis aus. Steht im form-Tag z.B. onsubmit="return false", so erfolgt kein Versenden der Formulardaten, d.h der Aufruf von action=... unterbleibt.

Hingegen bewirkt z.B. ein onsubmit="return true" die nachfolgende Übermittlung der Formulardaten an die Verarbeitungsseite, die unter
action = "meine_serverseitige_verarbeitung.php"> eingetragen ist.

Code Snippet: form-Tag mit onsubmit

1. <form method="post"
2.       enctype="multipart/form-data"
3.       onsubmit="return validiere(this)"
4.       action = "meine_serverseitige_verarbeitung.php">
5.       ... hier sind weitere Formularelemente ...
6. <input type="submit" value="Submit" />
7. </form>

Validierungsfilter (allgemein) Wie soll validiert werden?

H. Stanley Judd:
"The ultimate security is your understanding of reality."

Ziel einer Validierung ist es, dem User Hilfestellungen für unzulässige Eingaben zu geben, Vandalismus zu unterbinden und unzulässige Zeichen und Teilstrings zu löschen. Es sollen lediglich zulässige Zeichen und zulässige Muster übertragen werden.

So sollte z.B. eine eingegebene eMail-Adresse gültig sein. Eine IP-Adresse (IPv4/IPv6) sollte gültig sein.
So kann z.B. das Entfernen von Zeichen gewünscht sein:

keine HTML-kodierte Zeichen "" < > &
keine Zeichen mit einem ASCII-Wert kleiner als 32
nur Buchstaben, Ziffern und ! # $ % & ' * +- =? ^ _ ' {|} ~ @.]
nur Buchstaben, Ziffern und $-_. +! * ' (), {} |\\ ^ ~ [] ' <> # "; /?: @ & =

So kann z.B. das Prüfen von String/Zahlen-Darstellungen und String/Zahlen-Bereichen gewünscht sein:

nur Ziffern und +-,
nur (int/float)-Zahlen aus einem vorgeschriebenen Geltungsbereich.
nur Zeichenketten mit einer min./max-Anzahl von Zeichen.

Wie kann solches realisiert werden? Hierzu können hilfreich sein: Reguläre Ausdrücke und benutzer-definierte Funktion zum filtern von Daten und zum entfernen oder kodieren von Sonderzeichen.

Filter-Aufrufzuordnung (Idee) Wie wird sowas flexibel gemacht?

Das name-Attribut identifiziert das Eingabefeld. Der zugeordnete name-String des Eingabefeldes soll auch als Array-Name für die zugeordneten Filter dienen. Dadurch ist klar, welches Eingabefeld (beim Abchicken) mit welchen Filtern geprüft wird.

Code Snippet. Prinzip des HTML-Formulares

1. <form name="FORM" ... >
2.   <input name="NAME" ... />
3.   <input name="ORT" ... />
4.   <input name="TEL" ... />
5.   <input name="EMAIL" ... />
6.   <textarea name="INFO" ...>...</textarea>
7. </form ... >

Code Snippet: Aufruf von check({...})

1. .check({
2.   'NAME' :['TRIM',     'ANZ_3_99',  'HAS_KOMMA'],
3.   'ORT'  :['ANZ_3_99', 'HAS_BLANK', 'HAS_NUM'],
4.   'TEL'  :['TELEFON'],
5.   'EMAIL':['EMAIL'],
6.   'INFO' :['ANZ_0_9999']
7. });

Formular-Initialisierung (Aufruf) Wie wird die Formular-Initialisierung gemacht?

Im Header (unter window.onload = function() { ... }) wird die folgende Formular-Initialisierung aufgerufen:

Code Snippet: Formular-Initialisierung in window.onload = function() { ... }

1. validate.formular('FORM')
2.   .colors('#efd','#fdd')
3.   .submit_with('__SENDEN')
4.   .check({
5.     'NAME' :['TRIM',     'ANZ_3_99',  'HAS_KOMMA'],
6.     'ORT'  :['ANZ_3_99', 'HAS_BLANK', 'HAS_NUM'],
7.     'TEL'  :['TELEFON'],
8.     'EMAIL':['EMAIL'],
9.     'INFO' :['ANZ_0_9999']
10.   });

Programmier-Beiwerk Welche 'flankierenden' Funktionen werden gebrauch?

Code Snippet: Welche (Hilfs-) Funktionen

1. // Hinterlege vom form-Tag name='form_nam'
2. // in privater Variable NAME
3. formular: function (form_nam) {
4.    NAME = form_nam;  
5.    return this;
6. },
7.    
8. // Hinterlege die Prüfvorschriften in der
9. // in dem privater Check-Objekt CO und
10. // schreibe in das form-Tag die onsubmit-Funktion
11. check: function (check_objekte) {
12.    CO = check_objekte;
13.    document.forms[NAME].onsubmit = function() {
14.      return validate.do_check();
15.    }; return this;
16. },
17.    
18. // Verwende anstelle eines submit-Butten
19. // den Butten mit name='name_send_button'
20. submit_with: function (name_send_button) {
21.    document.forms[NAME][name_send_button].onclick = function() {
22.      if(validate.do_check()){ document.forms[NAME].submit();}
23.    }; return this;
24. },
25.    
26.  
27. // Hinterlege die Hintergrund-Farben
28. // im privater Color-Objekt CO
29. colors: function (bg0,bg1) {
30.    COL.bg0 = bg0; // OK-Hintergrund-Farbe
31.    COL.bg1 = bg1; // Error-Hintergrund-Farbe
32.    return this;
33. }

Code für das validate-Objekt Wie sieht der gesamte validate-Code aus?

Code Snippet

1. "use strict";
2. var validate = (function () {
3.  
4. var NAME = null, // name = NameAttribut des Form-Tags
5. CO  = {}, // Check, wie  'ORT':['ANZ_3_99', 'HAS_BLANK', 'HAS_NUM'],,
6. CA  = ['ENTITIFY'], // Pflicht-Transform fuer alle Elemente
7. COL = { bg0:"#fff", bg1:"#fee" },
8. re = {'HAS_KOMMA': /[,]/,
9.        'NO_KOMMA':  /[^,]/,
10.        'HAS_BLANK': /[ ]/,
11.        'HAS_NUM':   /^[\s\S]*?[0-9]+[\s\S]*?$/,
12.        'IS_NUM':    /[0-9]+/,
13.        'ANZ_3_99':  /^[\s\S]{3,99}$/,
14.        'ANZ_0_9999':/^[\s\S]{0,9999}$/,
15.        'TELEFON':   /^\D{0,4}[\- 0-9]{4,18}$/,
16.        'EMAIL':     /\b[a-zA-Z0-9._%\+\-]+@(?:[a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,4}\b/,
17.        'TRIM': function(s) {return s.replace(/^\s+|\s+$/g,""); },
18.        'ENTITIFY':function (s) {
19.          return s.replace(/\&lt;/g,'<').replace(/\&gt;/g, '>').replace(/\&amp;/g, '&').
20.          replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g, '&gt;');
21.        },
22.        'ESCAPING':  function(s) {
23.          s = re.TRIM(s).replace(/^\"([\s\S]*?)\"$/g, '$1').replace(/\\\\/g, '\\');
24.          return ('"' + s.replace(/(["\\])/g, '\\$1') + '"').
25.                     replace(/[\f]/g, "\\f").replace(/[\b]/g, "\\b").
26.                     replace(/[\n]/g, "\\n").replace(/[\t]/g, "\\t").
27.                     replace(/[\r]/g, "\\r");
28.        }
30. };
31.  
32. return {
33.  
34. do_check: function (){
35.   var i, k, rk, val, arr, tag, nam, bflag,
36.   inp = document.forms[NAME].elements, OK = true; //true ruft action="..."
37.  
38.   for( i=0; i < inp.length; i += 1 ) {
39.     nam = inp[i].name; if(nam==='undefined'){continue;}
40.     val = inp[i].value;
41.     tag = inp[i].tagName.toLowerCase();
42.     if(tag ==="input" || tag === "textarea") {
43.     inp[i].style.backgroundColor = COL.bg0;
44.     for( k=0; k < CA.length; k += 1 ) {
45.       rk = re[CA[k]]; // default-Transf für alle Elemente
46.       if(typeof rk === 'function') {
47.         val = rk(val);
48.         inp[i].value = val;
49.       }
50.     }
51.     arr = CO[nam]; if(typeof arr !== 'object'){continue;}
52.     for( k=0; k < arr.length; k += 1 ) {
53.       rk = re[arr[k]]; // individueller Check
54.       if(typeof rk === 'function') {
55.          val = rk(val);
56.          inp[i].value = val;
57.       } else if(typeof rk === 'object') {
58.         try {bflag = re[arr[k]].test(val);
59.           } catch (e)  {
60.             inp[i].style.backgroundColor = COL.bg1;
61.             alert("ERR: inp["+i+"]:"+e);
62.           }
63.           if( !bflag ) { OK = false;
64.             inp[i].style.backgroundColor = COL.bg1;
65.           }
66.         }
67.       } // ende if (typeof ...
68.     } // ende for ...
69.   } return OK;
70. },
71. formular: function (form_nam) {
72.    NAME = form_nam;
73.    try {
74.      if(document.forms[NAME].tagName.toLowerCase() === "form")
75.      { return this; } } catch (e1)  { alert("ERR: form name='?'");
76.    } return null;
77. },
78. check: function (check_objekte) {
79.    CO = check_objekte;
80.    document.forms[NAME].onsubmit = function() {
81.      return validate.do_check();
82.    }; return this;
83. },
84. submit_with: function (name_send_button) {
85.    document.forms[NAME][name_send_button].onclick = function() {
86.      if(validate.do_check()){ document.forms[NAME].submit();}
87.    }; return this;
88. },
89. colors: function (bg0,bg1) {
90.    COL.bg0 = bg0;
91.    COL.bg1 = bg1;
92.    return this;
93. }
94.  
95. };}());

Beispiel: Test-Formular Wie sieht es praktisch aus?

Dieses Formular entspricht der obigen Beschreibung. Die Eingabetexte werden vor dem Wegschicken der Daten validiert. Zsätzlich zur obigen Beschreibung wurde eine CAPTCHA -Möglichkeit eingebaut.

 Herr 
 Frau 
 Nachname, Vorname 
 PLZ und Wohnort   
 Telefon-Nummer    
 E-Mail-Adresse    
  INFO 
                   ...
 
 Bitte den Sicherheitscode (nur die Ziffern) eingeben 
   
 Falls unleserlich bitte neue Ziffern und anhören
 
 Abschicken mit 'submit'  
 Abschicken mit 'button'  

Erweiterung: Mehrere-Formulare je Seite Wie geht sowas?

Das obige validiere-Objekt verwendet private Variablen. Diese gehören zu einem Formular. Sollen je Seite mehrere Formulare validiert werden, so kann zum mitprotokollieren der Formulare ein Objekt G verwendet werden, das durch

 formular: function (form_nam) {
  ID = document.title.replace(/([^a-zA-Z0-9_])/g, "") + "_" + form_nam;
  if (!G[ID]) { G[ID] = Object.create(G.X); } 
   G[ID].NAME = form_nam;
         NAME = form_nam;
   G[ID].ID = ID;
   try {
     if(document.forms[G[ID].NAME].tagName.toLowerCase() === "form") 
     { return this; } } catch (e1)  { alert("ERR: form name='?'"); 
   } return null;
 }, 

kreiert wird. Achtung! Der folgende Code ist nicht 'perfekt', sondern soll lediglich das Prinzip zeigen.

Code Snippet: Validiere mehrere Form's je Seite

1. var validate = (function () {
2.   var G = { // eindeutig
3.     "X": {
4.       ID   : null, // eindeutig aus titel und Formname
5.       NAME : null, // = NameAttribut des aktuellen Form-Tags
6.       CO   :{} // Check, wie  'ORT':['ANZ_3_99', 'HAS_BLANK', 'HAS_NUM'],,
7.     }
8. },
9.  
10. NAME = null, // = NameAttribut des aktuellen Form-Tags
11. ID = null,   // eindeutig aus titel und Formname
12. CA  = ['ENTITIFY'], // Pflicht-Transform fuer alle Elemente
13. COL = { bg0:"#fff", bg1:"#fee" },
14. capcha_data = {anz:4, txt:'', num:'',id_txt:'',id_alert:''},
15. re = {'HAS_KOMMA': /[,]/,
16.        'NO_KOMMA':  /[^,]/,
17.        'HAS_BLANK': /[ ]/,
18.        'HAS_NUM':   /^[\s\S]*?[0-9]+[\s\S]*?$/,
19.        'IS_NUM':    /[0-9]+/,
20.        'ANZ_3_99':  /^[\s\S]{3,99}$/,
21.        'ANZ_0_9999':/^[\s\S]{0,9999}$/,
22.        'TELEFON':   /^\D{0,4}[\- 0-9]{4,18}$/,
23.        'EMAIL':     /\b[a-zA-Z0-9._%\+\-]+@(?:[a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,4}\b/,
24.        'TRIM': function(s) {return s.replace(/^\s+|\s+$/g,""); },
25.        'ENTITIFY':function (s) {
26.          return s.replace(/\&lt;/g,'<').replace(/\&gt;/g, '>').replace(/\&amp;/g, '&').
27.          replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g, '&gt;');
28.        },
29.        'ESCAPING':  function(s) {
30.          s = re.TRIM(s).replace(/^\\cf5 "([\s\S]*?)\"$/g, '$1').replace(/\\"/g, '"').replace(/\\\\/g, '\\');
31.          return ('"' + s.replace(/(["\\])/g, '\\$1') + '"').
32.                     replace(/[\f]/g, "\\f").replace(/[\b]/g, "\\b").
33.                     replace(/[\n]/g, "\\n").replace(/[\t]/g, "\\t").
34.                     replace(/[\r]/g, "\\r");
35.        },
36.        'PASSWORT_TEST': function(s) {
37.          s = s.replace(/^\s+|\s+$/g,"").replace(/\s+/g," ");       
38.          var a2 = s.split(" ");if(a2.length!==2){return "";}
39.          if(a2[0] === a2[1]){alert("Passwort-Test (bzw. PW-Initialisierung)");
40.          } else {alert("Neues Passwort soll altes Passwort ersetzten");
41.          } return s;
42.        },
43.        'CAPCHA': function(s) { return capcha_data.num === re.TRIM(s); }
44. };
46.  
47. return {
48.  
49. do_check: function (tn){   
50.   var i, k, rk, val, arr, tag, nam, bflag, inp, OK = true; //true ruft action="..."
51.   ID   = G[tn].ID;
52.   NAME = G[tn].NAME;
53.   inp = document.forms[NAME].elements;
54.   
55.   for( i=0; i < inp.length; i += 1 ) {
56.     nam = inp[i].name; if(nam==='undefined'){continue;}
57.     val = inp[i].value;
58.     tag = inp[i].tagName.toLowerCase();
59.     if(tag ==="input" || tag === "textarea") {
60.     inp[i].style.backgroundColor = COL.bg0;
62.     for( k=0; k < CA.length; k += 1 ) {
63.       rk = re[CA[k]]; // alle Elemente: default-Transf
64.       if(typeof rk === 'function') {  
65.         val = rk(val); inp[i].value = val;
66.       }
67.     }
68.     arr = G[tn].CO[nam]; if(arr === undefined){continue;}
69.     for( k=0; k < arr.length; k += 1 ) {  
70.       rk = re[arr[k]]; // individueller Check
71.       if(typeof rk === 'function') {
72.         if(arr[k] !== 'CAPCHA') {
73.           val = rk(val); inp[i].value = val;
74.         } else if(!rk(val)) { OK = false;
75.           inp[i].style.backgroundColor = COL.bg1;
76.         }
77.       } else if(typeof rk === 'object') {
78.         try {bflag = re[arr[k]].test(val);
79.           } catch (e)  {
80.             inp[i].style.backgroundColor = COL.bg1;
81.             alert("ERR: inp["+i+"]:"+e);
82.           }
83.           if( !bflag ) { OK = false;
84.             inp[i].style.backgroundColor = COL.bg1;
85.           }
86.         }
87.       } // ende if (typeof ...
88.     } // ende for ...
89.   } return OK;
90. },
92. formular: function (form_nam) {
93.   NAME = form_nam;
94.   ID = document.title.replace(/([^a-zA-Z0-9_])/g, "") + "_" + form_nam;
95.   if (!G[ID]) { G[ID] = Object.create(G.X); }
96.    G[ID].NAME = form_nam;
97.    G[ID].ID = ID;
98.    try {
99.      if(document.forms[G[ID].NAME].tagName.toLowerCase() === "form")
100.      { return this; } } catch (e1)  { alert("ERR: form name='?'");
101.    } return null;
102. },
104. check: function (check_objekte) { // meint set-check
105.    ID = document.title.replace(/([^a-zA-Z0-9_])/g, "") + "_" + NAME;
106.    G[ID].CO = check_objekte;
107.    document.forms[G[ID].NAME].onsubmit = function(ID) {
108.      return function(){
109.        return validate.do_check(ID);
110.      };
111.    }(ID); return this;
112. },
113.  
114. submit_with: function (name_send_button) {
115.    ID = document.title.replace(/([^a-zA-Z0-9_])/g, "") + "_" + NAME;
116.    document.forms[G[ID].NAME][name_send_button].onclick = function(ID) {
117.      return function(){
118.        if(validate.do_check(ID)){
119.          document.forms[G[ID].NAME].submit();
120.        }
121.      };
122.    }(ID); return this;
123. },
125. colors: function (bg0,bg1) {
126.    COL.bg0 = bg0;
127.    COL.bg1 = bg1;
128.    return this;
129. },
130.  
131. captcha: function () {
132. var arr = [ // roman 8544,...
133. 49, 50, 51, 52, 53, 54, 55, 56, 57,
134. 49, 50, 51, 52, 53, 54, 55, 56, 57,
135. 10102, 10103, 10104, 10105, 10106, 10107, 10108, 10109, 10110,
136. 10122, 10123, 10124, 10125, 10126, 10127, 10128, 10129, 10130,
137.   9312,  9313,  9314,  9315,  9316,  9317,  9318,  9319,  9320,
138. 10112, 10113, 10114, 10115, 10116, 10117, 10118, 10119, 10120,
139. 9332, 9333, 9334, 9335, 9336, 9337, 9338, 9339, 9340,
140. 9352, 9353, 9354, 9355, 9356, 9357, 9358, 9359, 9360], len = arr.length,
141. i, j, k, sty = 'font-style:italic;';
142. capcha_data.txt=''; capcha_data.num='';
143. for (i=0; i < capcha_data.anz; i += 1) {
144.    j = 0.95 + Math.random() * 1.6;
145.    k = Math.floor(Math.random() * len);
146.    capcha_data.num += 1 + k%9;
147.    if(k%3===0) { capcha_data.txt += "<span style='"+sty+"'>&#";
148.    } else {  capcha_data.txt += "<span style='font-size:"+j+"em;'>&#";
149.    } capcha_data.txt += arr[k]+"; </span>";
150. } //return {num:capcha_data.num, txt:capcha_data.txt, dlg:alert(num)};
151. },
152. captcha_id: function (id_txt, id_alert) {
153.   this.captcha();
154.   //validate.captcha();
155.   
156.   capcha_data.id_txt = id_txt || capcha_data.id_txt;
157.   document.getElementById(capcha_data.id_txt).innerHTML = capcha_data.txt;
158.   return this;
159. },
160. captcha_alert: function () { alert(capcha_data.num); return this; }
161.  
162. };}());