Validieren von Formular-Eingaben (MDI) ecmascript-beispiele/formular-validieren

Eine Übermittlung von XHTML-Formular-Daten zum Server kann unerwünscht sein, wenn bestimmte Eingaben fehlen, falsch oder unbrauchbar sind. Natürlich kann eine Prüfung Daten auf der Client- und/oder der Server-Seite erfolgen.

Die vorherigen Entwicklungschritte, die zu diesem MDI-Code geführt haben, sind hier beschrieben: Validierung (SDI, einfach)

EFormular-Validierung (MDI,clienseitig) Prüfen vor Wegschicken ...

Nachfolgend wird eine clientseitige Prüfung der Daten (ECMAScript) behandelt, wobei der ECMAScript-Code in der Frameset-Seite (parent bzw. top) untergebracht wird und dann von allen Frame-Seiten, die mindestens ein Formular enthalten, genutzt werden kann. Vor dem Wegschicken der eingegebenen Formulardaten prüft ECMAScript die Daten.

Die vorherigen Entwicklungschritte, die zu diesem MDI-Code geführt haben, sind hier beschrieben: Validierung (SDI, einfach)

Verwendung des MDI-validiere-Objektes Wie sieht ein typische Aufruf aus?

Weil der validate-Code in der Frameset-Seite (parent bzw. top) ist, wird nach dem Laden der Frame-Seite (innerhalb von window.onload = function() { ... }) durch parent.validate der Parent-Code aufgerufen.

Zu parent.validate.formular()

Wird die Funktion parent.validate.formular(document, 'FORMNAME', 'http://...für action') ohne den letzten Parameter-String für das action-Attribut des Formulares aufgerufen, so wird der action-String vom form-Tag verwendet. Ansonsten überschreibt der letzten Parameter-String ('http://...für action') von parent.validate.formular(document, 'FORMNAME', 'http://...für action') das action-Attribut des Formulares.

Hat das Form-Tag der XHTML-Seite einen name='FORMNAME', so werden in der Funktion parent.validate.formular(document, 'FORMNAME') aus dem Parameter document die Frame-Nummer FRNR (0, 1, 2, ..., frames.length) des Frames ermittelt, in dem das Dokument geladen wurde.

Auch ermittelt parent.validate.formular(document, 'FORMNAME') intern aus document.title, 'FORMNAME' und FRNR einen Identifizierer ID, der ein Formular eindeutig kennzeichnet. Dies ist sinnvoll, weil es je Seite mehrere Formulare (mit unterschiedlichen 'FORMNAME') geben kann und eine Seite in verschiedenen Frames geladen werden könnte.

ID ist die eindeutige Formularkennung. parent.validate.formular(document, 'FORMNAME') erzeugt mit if (!G[ID]) { G[ID] = Object.create(G.X); } ein Objekt G[ID]. Zu jedem ID (=eindeutige Formularkennung) werden in das Objekt G[ID] die ID-spezifische Daten eingetragen. Mit ID können (trotz window.onload, window.onunload) die formularspezifischen Zustände stets im G[ID]-Objekt erhalten und geändert werden.

Bei einem Fehler von parent.validate.formular(document, 'FORMNAME') erscheint die Meldung: alert("ERR: .formular(document, 'form_nam', ... )")

Zu submit

Soll anstelle eines "normalen Submit" 
       (wie z.B. <input type="submit" value="Senden" />)
ein type="button" 
       (wie z.B. <input type="button" name="__SENDEN" value="Senden" />;) 

verwendet werden, so löst die Funktion .submit_with('__SENDEN') mit der ECMAScript-Funktion .submit() ein Submit-Ereignis aus. Soll also eine clientseitige Validierung "erzwungen" werden, so darf keine ECMAScript-Deaktivierung (im Browser) erfolgen. Wird (anstelle eines type="submit") ein type="button" verwendet, so wird bei deaktiviertem ECMAScript kein Submit-Ereignis ausgelöst.

Zu .check({ ... })

Der Funktion .check({ ... }) werden die input-Tag Namen gefolgt von einem Array von Prüfvorschriften für diesen Eingabewert hinterlegt. Befindet sich der validate-Code in der Frameset-Seite (parent bzw. top), so kann parent.validate etwa wie folgt aufgerufen werden.

Code Snippet: Aufruf von parent.validate.formular...
  1. window.onload = function() {
  2.  
  3.   parent.validate.formular(document, 'FORMNAME',
  4.   'javascr'+'ipt:alert("Jetzt wird \'action=...\' ausgeführt");')
  5.   .check({
  6.     'NAME' :['TRIM', 'ANZ_3_99',  'HAS_KOMMA', 'ESCAPING'],
  7.     'ORT'  :['ANZ_3_99', 'HAS_BLANK', 'NO_KOMMA', 'HAS_NUM'],
  8.     'TEL'  :['TELEFON'],
  9.     'EMAIL':['EMAIL'],
  10.     'INFO' :['ANZ_0_9999']
  11.   });
  12.   
  13. }; // ende onload
Beispiel: Formular mit CAPTCHA-Sicherheitscode Aufruf-Beispiel

Zu CAPTCHA

Code Snippet
  1. Bitte den Sicherheitscode (nur die Ziffern) eingeben
  2. <span id="CAPTCHA_TXT" class="border" title="Spambot "></span> <input
  3.   type="text"
  4.   name="__CAPTCHA_TXT" size="8" value=""
  5.   title="Bitte nur die Ziffern eingeben " />
  6. Falls unleserlich bitte <a
  7.   href="javascript:void(0)" onclick="parent.validate.captcha_id(document,'FORMNAME','CAPTCHA_TXT');return false;">neue Ziffern</a> und <a
  8.   href="javascript:void(0)" onclick="parent.validate.captcha_alert(document,'FORMNAME','CAPTCHA_TXT');return false;"
  9.   title="Barrierefreiheit, akustische CAPTCHA">anhören</a>
Test: Formular mit CAPTCHA-Sicherheitscode Aufruf-Beispiel
 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'