simple Javascript HTML5 jQuery Form Validation

Formular Validierung hat noch nie Spaß gemacht und meistens beschränke ich die Validierung auf die Server-Seite. Doch bevor man ein Formular per AJAX abschicken will, ist es immer besser auch auf der Client-Seite die Eingaben zu validieren und dem Benutzer ggf. noch darauf hinzuweisen dass nicht alle notwendigen Informationen eingegeben sind, das erspart Frustration.

HTML5 ist dabei eine große Hilfe. Mit dem erweiterten Formularfeld Attribut type, sowie dem pattern und required Attribut übernimmt der Browser die Validierung. Per Javascript reicht dann die Suche nach Formular Elementen die required sind aber einen invalid Status haben:

var $form = $("#emailForm");
if ($form.find(":required:invalid").length === 0) {
  // alle Pflichtfelder validieren

} else {
  // Nicht alle Pflichtfelder validieren
}

Über CSS kann man die Formularfelder auch noch stylen je nachdem ob sie valid oder invalid sind. Wer noch „Nicht-HTML5-Browser“ unterstützten muss, könnte per Modernizr((Modernizr  – the feature detection library for HTML5/CSS3)) eine Weiche schalten und ein Javascript Plugin zur Valdierung nutzen, oder per Progressive Enhancement((Progressive Enhancement – Wikipedia Artikel)) das Formular einfach über die serverseitige Parameter Validierung überprüfen und ausgeben lassen – um die serverseitige Validierung kommt man auch mit der jQuery Zeile von oben nicht drumherum. Frontend Formular Validierung ist und bleibt ein UX-Enrichment((UX Enrichment – Die Bereicherung des Benutzer Erlebnis)).