Formular : Eingabe Prüfen

Allgemein

Bei Internet und Intranet Applikationen müssen alle Eingabedaten eines Users auf Gültigkeit überprüft werden. Eine serverseitige Prüfung ist immer notwendig, um auch Requests abzufangen, die absichtlich manipuliert wurden.

Die hier beschriebene clientseitige Prüfung der Formular Eingaben dient als nützlich Ergänzung, mit folgenden Vorteilen:

Prüfung beim Absenden

Bei dieser Variante werden alle Eingabefelder nacheinander beim Absenden des Formulars überprüft. Wird bei einem Feld ein Fehler festgestellt, informiert man den User, setzt den Focus in das entsprechende Eingabefeld und bricht die weitere Verarbeitung ab. Der Returnwert false verhindert dabei das Absenden des Formulars an den Server.

<form action="change.html" onsubmit="return check()" method="post"> <input type="text" name="firstName" id="firstName"/> ... <input type="submit" value="Save"/> </form> function check() { var element = null; element = document.getElementById('firstName'); if (element.value.length <= 0) { alert('Your first name is missing!'); element.focus(); return false; } .... return true; }

Realtime Prüfung

Bei der Realtime Prüfung werden die Eingaben des User sofort bei jeden Tastendruck (onkeyup) und/oder beim Verlassen eines Eingabefeldes (onblur) überprüft.

Das JavaScript Framework JSAction bietet einige Standard Prüffunktionen. Über spezielle Indentifier kann man sehr einfach Eingabefelder mit diesen Funktionen verbinden, ohne dass man selbst JavaScript codieren muss.

Das Erscheinungsbild der Eingabefelder bei auftretenden Fehler wird global über CSS Selektoren erledigt. So kann jeder selbst bestimmen, ob ein roten Rahmen erzeugt oder der Hintergrund gefärbt werden soll.

input.error, select.error, textarea.error { border: 2px solid red; }

Das JavaScript Framework bindet man im Header einer Seite mit nur wenigen Zeilen ein. Optional kann man Dezimaltrennzeichen und Tausendertrennzeichen für unterschiedliche Länder bzw. Formatierungen festlegen.

<script src="JSAction_de.js" type="text/javascript">//</script> <script src="JSAction.js" type="text/javascript">//</script> <script type="text/javascript"> //<![CDATA[ HpResource.decimalSeparator = '.'; HpResource.groupingSeparator = ','; //]]> </script>

Jetzt codiert man ganz normal seine Eingabefelder und setzt einfach nur noch spezielle Identifier im class Attribute um die gewünschten Funktionen zu erhalten. Der Sourecode bleibt dabei weitherhin absolute valide.

Zahl <input type="text" name="quantity" class="integer"/>
Preis <input type="text" name="price" class="currency"/>

Das Zahlenfeld hier läst nur ganze Zahlen zu, das Preisfeld erlaubt bis maximal zwei Nachkommastellen. Beim Verlassen des Feldes wird der Inhalt automatisch formatiert.

Zahl Preis

Identifier

integer
Nur ganze Zahlen
decimal
Kommazahlen mit beliebig vielen Dezimalstellen
currency
Preis mit 2 Dezimalstellen
rate
Kurs mit 4 Dezimalstellen

Zusätzliche Parameter

minimum1
Minimum Wert 1
maximum10
Maximum Wert 10
step
Schrittweite
required
Eingabe ist zwingend erforderlich
plain
Eingabe nicht formatieren
notrim
Keine Prüfung auf führende oder nachfolge Leerzeichen

Johannes Hammoud Formular : Eingabe Prüfen 21.10.2007

I Coding : Community über Java Programmierung

Sprache Englisch+-

Java JSF JavaScript HTML CSS NetBeans GlassFish MySQL

Impressum

Besuche
5744557
Heute
126