Der Heutige Blogeintrag dreht sich um das Thema „Validierung“. Sicherlich hat bereits jeder Web-Entwickler die Bekanntschaft mit Formularvalidierung gemacht – Sei es nun Server- oder Clientseitig (Also mit Hilfe von PHP oder Javascript). Für Heute habe ich mir die Clientseitige Validierung vorgenommen, die Serverseitige Validierung wird dann im nächsten Eintrag behandelt.

Achtung! Javascript Validierung ist schön und gut aber keinesfalls ausreichend, da das Javascript im Browser deaktiviert und somit umgangen werden kann.

Bevor ihr nun wild mit dem entwickeln von Funktionen beginnt solltet ihr euch zu aller erst die Frage stellen ob es für euch Sinn macht eine fertige Lösung für dieses Problem zu suchen. Wenn ihr ein Framework (wie z.B. jQuery oder Prototype) benutzt gibt es genug Plugins die euch beim Validieren von Formularen unterstützen.
Natürlich inklusive „hübscher“ Darstellung usw.

Das ganze spart sicherlich Zeit – Sofern ihr ein Plugin findet das für eure Zwecke geeignet ist. Denn es macht schließlich nicht viel Sinn ein Plugin zu nutzen an dem ihr das meiste noch selbst ergänzen müsst!

Für die „Macher“ unter euch habe ich hier drei Funktionen zusammengestellt mit denen ihr die Grundlagen der Validierung lernen könnt. Es handelt sich dabei um eine „Integer“, eine „E-Mail-Adressen“ und eine „Zahlen“-Validierung…

Die folgenden drei Funktionen liefern euch einen Booleschen Wert („true“ oder „false“) zurück. Weiter unten gibt es ein kurzes Beispiel zur Anwendung.

// Validiert eine Ganzzahl.
function is_integer(x) {
   var y=parseInt(x); 
   if (isNaN(y)) return false; 
   return x==y && x.toString()==y.toString(); 
}

(Gefunden auf www.peterbe.com)

// Validiert eine E-Mail-Adresse.
function is_email(email) {
   return /^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/i.test(email);
}

(RegEx Gefunden auf blog.ich-wars-nicht.ch)

// Validiert eine formatierte Zahl wie z.B. "1.999,00"
function is_number(num) {
   return /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(num);
}

(Gefunden auf jquery.bassistance.de)

Aufgerufen werden die Funktionen folgendermaßen:

// Wird "true" in der Javascript Konsole ausgeben:
console.log(is_integer(100));
console.log(is_integer('100'));
console.log(is_integer(-100));
console.log(is_integer('-100'));
console.log(is_email('post@leonardfischer.de'));
console.log(is_email('test@example.com'));
console.log(is_number('1000000'));
console.log(is_number('1.000.000,0'));
console.log(is_number('-1000000,0'));

// Wird "false" in der Javascript Konsole ausgeben:
console.log(is_integer(100.0)); // Kommazahl.
console.log(is_integer('100.0')); // ...
console.log(is_integer(-100.0)); // ...
console.log(is_integer('-100.0')); // ...
console.log(is_integer('10e5')); // Zahl mit einem Buchstaben.
console.log(is_integer('Hundert')); // String.
console.log(is_email('post(at)leonardfischer.de')); // Fehlendes "@" Zeichen.
console.log(is_email('example.com')); // Fehlende Adresse und "@" Zeichen.
console.log(is_number('1.00.0000')); // Keine tausender Schritte.
console.log(is_number('1,000,000.0')); // Komma als Separator anstatt Punkten.
console.log(is_number('10.000.000'));

Ein großes Problem bei der Entwicklung von eigenen Javascript Validierungen ist, das man natürlich einerseits möglichst sauber und flexibel arbeiten möchte – Andererseits aber möglichst „starke“ und sichere Funktionen schreiben will – Da gibt es natürlich die verschiedensten Möglichkeiten, die ganz von euren Kenntnissen abhängen…

<input type="text" value="E-Mail-Adresse" name="email" onBlur="validate();" />
<script type="text/javascript">
function validate() {
   if (! is_email(document.getElementsByName('email')[0].value)) {
      // Hier könnte z.B. der submit-button deaktiviert werden.
   }
}
</script>

Mit Hilfe des „onBlur“ Attributes wird eine Javascript Funktion definiert, die ausgeführt werden soll, sobald das Feld den Fokus verliert.
Man könnte sagen das dies die „Anfänger“-Variante ist, welche außerdem relativ veraltet ist. Heutzutage versucht man möglichst zu umgehen Attribute zu nutzen (das gleiche gilt übrigens auch für das Styling von HTML Elementen).

Das ganze sieht z.B. in jQuery sehr viel eleganter und leserlicher aus:

<input type="text" value="E-Mail-Adresse" name="email" />
<script type="text/javascript">
$('input[name="email"]').blur(function() {
   if (! is_email($(this).val())) {
      // Hier könnte z.B. der submit-button deaktiviert werden.
   }
});
</script>

Hier wird mit Hilfe von Event-Binding das „onBlur“ Event des Input-Feldes (bei dem das „name“ Attribut den Wert „email“ beinhaltet) abgehorcht. Anschließend lässt sich (innerhalb der Callback-Funktion) mit „this“ auf das Input-Element zugreifen. Außerdem wird von jQuery garantiert, das der Code in sämtlichen Browsern funktioniert (IE 6.0+, FF2.0+, Safari 3.0+, … Stand: Dez 2011).

Um nun selbst ein solches Event-Binding zu programmieren benötigt man doch schon relativ gute Kenntnisse in Javascript. Vor allem, wenn man sicherstellen möchte dass das Skript in allen Browsern funktioniert!
Doch darauf möchte ich an dieser Stelle gar nicht weiter eingehen – Evtl. werde ich dazu einen eigenen Eintrag schreiben.

Wie dem auch sei – Natürlich gibt es noch genug andere Dinge die man validieren lassen kann (wie z.B. ob eine eingegebene URL oder ein eingegebenes Datum valide ist), doch diese speziellen Validierungen bestehen meistens nur aus RegEx-Prüfungen und lassen sich bei Bedarf auch schnell im Internet finden.
Außerdem sollte man sich, wie oben bereits erwähnt, nicht auf die Clientseitige Validierung alleine verlassen. Es sollte eher als ein „nice-to-have“ Feature gesehen werden welches die Usability der Web-Applikation erhöht.

Wie ihr seht ist eine Javascript Validierung nichts schlimmes oder allzu kompliziertes (mal von den komplexen RegEx Codes abgesehen).

Mein persönlicher Rat ist, das ihr auf bewährte Plugins für das Framework eurer Wahl zurück greift. Diese sind in den meisten Fällen nicht nur durch die entsprechende Community getestet sondern bieten auch für viele Probleme sogenannte „Best-Practice“-Lösungen.
Ich möchte ohnehin jedem Entwickler ans Herz legen ein solides Framework für seine Projekte zu nutzen – sowohl für PHP als auch für Javascript. Frameworks sparen nicht nur arbeit sondern erhöhen auch die Sicherheit eurer Applikation! Außerdem werden durch die vielen aktiven Communities die Projekte am Leben gehalten und erfahren zum großen Teil regelmäßige Updates.

Mit diesen Worten möchte ich den Heutigen Eintrag abschließen und wünsche euch weiterhin eine produktive Woche!

Solltet ihr Anregungen oder Kritik haben – Kommentare sind natürlich gerne gesehen!