Home > JavaScript > LiveValidation: Code Beispiele

LiveValidation: Code Beispiele

12. Februar 2012 Einen Kommentar schreiben Kommentare

In einem älteren Post habe ich über die JavaScript Bibliothek Live Validation von Alec Hill geschrieben. Nach diesem Post haben mich einige nach ein paar Beispielen gefragt. Zwar sind auf der offziellen Webseite einige Beispiele in der Dokumentation vorhanden, doch diese sind vielleicht etwas zu simpel. 🙂

Dann liste ich hier mal ein paar nützliche Beispiele und Tipps auf, die ich selbst auf diversen Webseiten verwendet habe, um beispielsweise bei der Registrierung die Felder wie Name, Vorname, E-Mail Adresse, AGB usw. zu validieren, ohne dass der Nutzer zuerst das Formular abschicken muss.

1. Beispiel: Loginformular: Username und Passwort validieren / checken:

XHTML
1
<input type="text" id="username" name="username" maxlength="25" />

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
var username = new LiveValidation('username', { onlyOnSubmit: true, validMessage: "OK"});
username.add( Validate.Presence, { failureMessage: "Bitte Usernamen eingeben."});
username.add( Validate.Length,
  { minimum: 2,
    maximum: 25,
    tooShortMessage : "Mindestens 2 Zeichen.",
    tooLongMessage: "Maximal 25 Zeichen." }
);
username.add(Validate.Custom,
  { against: function(value) {
      regexp = /^[a-zA-Z0-9]{2,25}$/;
      return regexp.test(value); },
    failureMessage: "Nur Zahlen und Buchstaben"}
);
</script>

Im oberen Script Beispiel zum „username “ habe ich zuerst ein neues LiveValidation Objekt angelegt,  im Konstruktor habe ich gleich angegeben mit der Eigenschaft „onlyOnSubmit: true“, dass der Username erst bei Klick auf den Submit-Button mittels Java Script gecheckt werden soll. Mit „validMessage“ definiert man den Text, der bei erfolgreicher Validierung ausgegeben werden soll. Mit der Methode „username.add()“ fügt man dem Objekt neue Validierungsregeln zu.

Die erste Regel „Validate.Presence“ sagt, dass das Eingabefeld nicht leer sein darf. Mit der zweiten Regel „Validate.Length“ kann man die Länge des eingegebenen Strings überprüfen. Sowohl „minimum“, als auch „maximum“ können festgelegt werden. Die entsprechenden Fehlermeldungen werden mit der Option „tooShortMessage“ bzw. „tooLongMessage“ beschrieben.

In der dritten Regel „Validate.Custom“ habe ich eine eigene Funktion angelgt, die mittels regulären Ausdrücken die Eingabe prüft. In diesem Fall darf nur ein String eingegeben werden, der sich nur aus Zahlen und Buchstaben mit einer Länge von 2 bis maximal 25 Zeichen zusammensetzt.

XHTML
1
<input type="password" id="password" name="password" maxlength="25" />

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var password = new LiveValidation('password', { onlyOnSubmit: true, validMessage: "OK"});
password.add(Validate.Presence, { failureMessage: "Bitte Passwort eingeben."});
password.add(Validate.Length,
  { minimum: 6,
    maximum: 25,
    tooShortMessage : "Mindestens 6 Zeichen.",
    tooLongMessage: "Maximal 25 Zeichen." }
);
</script>

Analog zum oberen Beispiel „Username habe ich 2 Regeln zum Passwort definiert. Da das Passwort auch aus Sonderzeichen bestehen kann, wurde die Callback Regel weggelassen wie im Username Beispiel weggelassen.

2. Beispiel: Passwort muss übereintimmen

Beim Registrierungsformular können unter anderem noch die folgenden Beispiel nützlich sein:

XHTML
1
<input type="password" name="password" value="" id="regpw"  />

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var regpw = new LiveValidation('regpw', { validMessage: "OK"});
regpw.add( Validate.Presence, { failureMessage: "Bitte Passwort eingeben."});
regpw.add(Validate.Length,
  { minimum: 6,
    maximum: 25,
    tooShortMessage : "Mindestens 6 Zeichen.",
    tooLongMessage: "Maximal 25 Zeichen." }
);
</script>

XHTML
1
<input type="password" name="password_conf" id="regpwconf" maxlength="25" />

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
var regpwconf = new LiveValidation('regpwconf', { validMessage: "OK"});
regpwconf.add( Validate.Presence, { failureMessage: "Bitte Passwort wiederholen."});
regpwconf.add(Validate.Length,
  { minimum: 6,
    maximum: 25,
    tooShortMessage : "Mindestens 6 Zeichen.",
    tooLongMessage: "Maximal 25 Zeichen."
  }
);
regpwconf.add(Validate.Confirmation, { match: 'regpw', failureMessage : "Passwörter ungleich." } );
</script>

Um zwei Felder mit einander abzugleichen, kann die „Validate.Confirmation“ Regel verwendet werden. Dies ist zum Beispiel nützlich um wichtige Daten wie Passworteinangaben oder E-Mail Adressen abzugleichen. Mit der Eigenschaft „match“ gibt man die „id“ des Form-Elements, mit welchem die Eingabe auf Gleichheit verglichen werden soll.

3. Beispiel: E-Mail Adresse validieren & auf Echtheit prüfen

XHTML
1
<input type="text" name="email" id="email" maxlength="255"  />

JavaScript
1
2
3
4
<script type="text/javascript">
var email = new LiveValidation('email', { validMessage: "OK"});
email.add(Validate.Presence, { failureMessage: "Bitte E-Mail eingeben."});
email.add(Validate.Email, { failureMessage : "Ungültige E-Mail-Adresse." } );

Zum Schluss ein weiteres Beispiel, um die E-Mailadresse zu validieren. Mit „Validate.Email“ wird die Eingabe des Users auf die Echtheit bzw. auf die Formatierung hin überprüft. Die E-Mail muss dem Schema „name @ provider . TLD“ entsprechen.

Ich hoffe das hilft Euch ein wenig. Nun wünsche ich viel Erfolg beim Bauen der eigenen Formulare. 😉

KategorienJavaScript Tags: , , , , , , , ,
  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks