Ein Javascript zum prüfen von input Feldern.
Ein genereller Ansatz, um Eingabefelder zu prüfen.
Dazu werden die Eingabefelder z.B. mit der Klasse class="required" versehen und der Event Handler wird in das form Element eingebunden:
form action="..." onSubmit="return verify(this);".../form
Nach dem Prüfen haben die entsprechenden Elemente zusätzlich die Klasse "valid", falls die Prüfung "true" ergab, oder "invalid", falls die Prüfung "false" ergab.
Weitere Klassen:
- required
- true, falls Inhalt vorhanden, false sonst.
- number
- true, falls Inhalt vorhanden und numerisch, oder falls leer. Nur für input type="text".
- true, falls Inhalt vorhanden und eine e-mail Adresse, oder falls leer. Nur für input type="text".
- url
- true, falls Inhalt vorhanden und eine url, oder falls leer. Nur für input type="text".
Für select class="required" gilt:
valid (true), falls mindestens eine Option ausgewählt ist, und
deren Wert nicht -1 ist.
Für input type="checkbox" class="required"
sowie input type="radio" class="required"
gilt, dass mindestens ein Element der Gruppe (eine Gruppe wird durch
gleiches "name" Attribut definiert) muss ausgewählt sein.
Es reicht, ein Element der Gruppe mit class="required" zu
versehen. Die ganze Gruppe wird nach Prüfung mit class="valid" oder
class="invalid" versehen.
Für input type="text" kann es sinnvoll ein,
die Klassen zu kombinieren. Zum Beispiel:
input type="text" class="required email"
Dies ergibt true, falls Inhalt vorhanden und dieser eine e-mail Adresse ist.
Die hinzugefügte Klasse "valid" resp. "invalid" kann zum Stylen per css genutzt werden. Z.B.:
.invalid { background-color: red; }
Falls statt der simplen Aussage valid oder invalid noch eine
Alertbox mit Nachricht gewünscht wird, kann statt der
Funktion verify(this) die Funktion alertErr(this) verwendet
werden. Diese ruft ihrerseits verify(this) auf, und falls
das Ergebnis invalid ist, sucht es alle Labels
label der invaliden Eingabefelder
heraus, sammelt diese und zeigt sie anschließend in einer
Alertbox an.
form action="..." onSubmit="return alertErr(this)"
