Formulare mit Javascript prüfen

Eingabe @ Fehler

• Jede Eingabe in ein Formular sollte vor Verwendung geprüft werden.
Typische Fehler sind z.B. Missverständnisse, vergessene Eingabe-Felder, Tippfehler, überschüssige Leerzeichen, Formatierung (Komma-Punkt oder -Beistrich, Datum, ...)
• Es gibt prinzipiell 2 Methoden zur Validierung (Prüfung) von Eingabe-Daten:

Interne Prüfung

Die erste Prüfung erfolgt am eigenen Arbeits-PC mit Javscript-Funktionen. Das ist besonders schnell und effizient und belastet auch bei oftmaliger Wiederholung weder das Netzwerk noch den Server. Damit kann man alle typischen Eingabe-Fehler beheben, jedoch keine böswilligen Angriffe abwehren.

Externe Prüfung

Die Prüfung am Server-PC kann mit unterschiedlichen Programmen erfolgen, z.B. mit C/C++, Java, Perl, PHP, Python. Diese Methode belastet Netzwerk und Server-PC und ist daher sparsam einzusetzen. Die Programme sind für normale AnwenderInnen unzugänglich und daher gut zur Abwehr von Angriffen geeignet.

Kombination

Die beste Effizienz und Sicherheit bietet die Kombination beider Methoden, so wie im Diagramm dargestellt.


Beispiele zum Thema 'Validierung' finden sie auf allen interaktiven Seiten dieses Webs: Alle Formular-Daten werden mehr oder weniger streng validiert.
(Dieser einfache Rechner erlaubt durch besondere Validierung und Decodierung u.a. auch binäre, oktale oder hexadezimale Eingabe)

HTML und Javascript

Javascript-Funktion

Die Funktion validate() ist im Quelltext dieser Webseite enthalten:
function validate() {
var txt = document.f1.f1t1.value;
alert('Eingabe = ' + txt);
}

• Erste Aufgabe jeder Validierungs-Funktion ist das Lesen aller aktuellen Formular-Daten (→ Details und Beispiele zum Lesen von Formularen).

• Alle weiteren Arbeiten richten sich nach den Details der jeweiligen Aufgabe.
Es gibt jedoch einige gemeinsame Aspekte, die man immer berücksichtigen sollte:

• Formular-Elemente enthalten als Werte immer Text (Strings). Wenn man Zahlen braucht, dann muss man die Text-Zeichen (Ziffern) zuerst in Zahlen umwandeln.

• Wenn das Validierungs-Programm einen Fehler findet und korrigiert, dann sollte es den korrigierten Wert in das Formular zurückschreiben und eine möglichst klare Rückmeldung geben (z.B. mit einem alert() Meldungsfenster).

• Man kann viel Aufwand treiben, um alle denkbaren Eingabe-Fehler schon vor dem 'eigentlichen' Absenden zu korrigieren. Damit kann man den Server je nach Aufgabe und Anzahl der BesucherInnen deutlich entlasten.
Die sorgfältige Validierung ist umso wichtiger, je mehr Eingabe-Elemente ein Formular enthält, weil damit die Wahrscheinlichkeit von Fehler zunimmt.

• Wenn alle Daten korrekt sind, dann muss die Javascript-Funktion die Daten zum Empfangs-Programm senden. Diese Arbeit wird im ↓ letzten Kapitel der Seite vorgestellt.

Säuberung

  Probetext
Leerzeichen als ▯ anzeigen


Rohtext (Länge 0)
t = document.f31.f31t1.value;
 

(1) Entfernung führender und folgender Leerzeichen (Länge 0)
t = t.trim();
 

(2) Entfernung von Mehrfach-Leerzeichen (Länge 0)
while(t.match(/  /)) {t=t.replace(/  /,' ');}
 

(3) Entfernung unerlaubter Zeichen (hier: aller nicht druckbaren Zeichen, aller Interpunktionen, und aller non-ASCII-Zeichen) (Länge 0)
t=t.replace(/[\x00-\x1F\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\xFF]/g,'');
 
Die hier 'unerlaubten' Zeichen sind willkürlich ausgewählt und dienen nur zum Ausprobieren der Methode. Stellen sie für eigene Anwendungen die jeweils passende Liste nach möglichst strengen Kriterien zusammen.

Zeichen ersetzen


var test = 'A1b2C3d4';
var t1 = test.toUpperCase();
var t2 = test.toLowerCase();
ergibt
t1 = 'A1B2C3D4'
t2 = 'a1b2c3d4'


var test = '12,34';
var n = test.replace(/,/,'.');
ergibt
n = '12.34'



Zeichen 'ä' (→ Unicode U+00E4) durch 'ae' ersetzen:
var korrigiert = test.replace(/\xE4>/g,'ae');

String ersetzen:
var prog = test.replace(/Javascript/g,'PHP');

Eingabe von Zahlen mit SchiebeRegler


Javascript-Quelltext
function read41() {
var r=document.f41.value;
alert('Aktueller Wert = '+r);
}

function evt41() {
document.f41.ro41.value=document.f41.ri41.value;
}
HTML-Quelltext
<form name="f41" method="get"
action="javascript:read41()">
<input type="range" name="ri41"
onchange="evt41()" oninput="evt41()"/>
<output name="ro41">50<output>
</form>



Der Wert eines Eingabe-Elements ist immer ein Text (String).
Wenn man ihn als Ganze Zahl verwenden will, dann muss man ihn mit der Standard-Funktion parseInt() in eine solche umwandeln.
Erst danach kann man damit rechnen:

var r = parseInt(document.f41.ri41.value);
r = r + 1;



Wenn man den Regler-Wert als Gleitkomma-Zahl verwenden will, dann muss man ihn mit der Standard-Funktion parseFloat() in eine solche umwandeln.
Erst danach kann man damit rechnen:

var r = parseFloat(document.f41.ri41.value);
r = r + 0.5;


Details zur Programmierung der → Ereignisse (Events) onchange und oninput mit SchiebeReglern.

Eingabe mit ZahlenFeld


Javascript-Quelltext
function read51() {
var r = document.f51.value;
alert('Aktueller Wert = '+r);
}
HTML-Quelltext
<form name="f51" method="get"
action="javascript:read51()">
<input type="number" name="r51" min="0" max="10"/>
</form>


Vor der Verwendung des Eingabe-Werts muss man den mit Javascript als Text (String) gelesenen Wert in eine Zahl umwandeln.

Dazu verwendet man die Standard-Fuktionen parseInt() oder parseFloat(), sow wie im vorigen Kapitel für ↑ SchiebeRegler gezeigt.

Validierung ganzer Zahlen


Validierung eines Eingabe-Strings und Umwandlung in eine ganze Zahl: Das Beispiel entfernt alle unerlaubten Zeichen, wandelt den String in eine Ganze Zahl (Integer) um und begrenzt den Wert auf den Bereich 0-255

// Wert Lesen
var t = document.....value;

// Illegale Zeichen entfernen
t = t.replace(/[\x00-\x2A\x2C\x2E\x2F\x3A-\x44\x46-\x64\x66-\xFF]/g,'');

// Wert in Ganze Zahl umwandeln
var i = -1;   // default
i = parseInt(t);
if(isNaN(i)) {i=-1;}

// Bereich kontrollieren
if(i<0) {i=0;}
else if(i>255) {i=255;}

// Wert Schreiben
document.....value = i;

Ersetzen sie die ... Punkte durch die Namen ihrer Anwendung, z.B.
document.f1.feld1.value

Validierung von Gleitkomma-Zahlen


Validierung eines Eingabe-Strings und Umwandlung in eine Gleitkomma-Zahl: Das Beispiel entfernt alle unerlaubten Zeichen, wandelt den String in eine Gleitkomma-Zahl (Double Precision, Float) um und begrenzt den Wert auf den Bereich -1Mio ... +1Mio

// Wert Lesen
var t = document.....value;

// Illegale Zeichen entfernen
t = t.replace(/,/,'.');
t=t.replace(/[\x00-\x2A\x2C\x2F\x3A-\x44\x46-\x64\x66-\xFF]/g,'');

// Wert in Gleitkomma-Zahl umwandeln
var f=0;   // default
f = parseFloat(t);
if(isNaN(f)) {f=0;}

// Bereich kontrollieren
if(f<-1e6) {f=-1e6;}
else if(f>1e6) {f=1e6;}

// Wert Schreiben
document.....value = f;

Ersetzen sie die ... Punkte durch die Namen ihrer Anwendung, z.B.
document.f1.feld1.value

Daten Senden

Javascript

function val91() {
// User-Daten lesen
var test = document.f91.f91t1.value;
// Validierung
var korrekt = test;
// Daten schreiben
document.f92.f92t1.value = korrekt;
// Formular absenden
document.f92.submit();
}

HTML-Formular zur User-Eingabe:

<form id="f91" name="f91" method="get" action="javascript:val91()">
<input type="text" name="f91t1"/>
</form>
<button onclick="val91()">Absenden</button>

Unsichtbares HTML-Formular zum Absenden:

<form id="f92" name="f92" method="get" action="ziel.php" style="display:none;">
<input type="text" name="f92t1"/>
</form>


Javascript

var ziel='ziel.php';
function val95() {
// User-Daten lesen
var test=document.f95.f95t1.value;
// Validierung:
var korrekt = test;
// Pfad codieren
var path=ziel+'?text='+encodeURIComponent(korrekt);
// Seite ersetzen
location.replace(path);
}

Eingabe-Formular

<form id="f95" name="f95" method="get" action="javascript:val95()">
<input type="text" name="f95t1"/>
</form>
<button onclick="val95()">Absenden</button>