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)).

jQuery && IE(6/7) && parsererror && utf8 && utf-8…

Heute hatte ich einen interessanten Fehler zu finden. Das Problem war ganz einfach, es sollte per ajax etwas nachgeladen werden. Genau genommen etwas validiert. Im Erfolgsfall kam die Antwort "1" ansonsten "0" zurück.

Und dann kam der IE6 und IE7 und gaben einen „parsererror“ aus. In Fiddler und Co konnte ich die ajax calls verfolgen und sehen das der richtige Wert zurückgeliefert wird, aber trotzdem wurde immer der „error“ Handler aufgerufen…

weiterlesen

YII Ajax Paginierung Controller

Bei meinem letzten Projekt habe ich mit dem großartigen Yii Framework eine Seite erstellt, die einerseits den aktuellen Trends folgen sollte, mir persönlich aber auch wichtig war, dass eine „No-Script“ Variante weitestgehend funktioniert.

Viele Inhalte der Seite sollten blätterbar sein und häufig wurde per Tab Navigationen Inhalt ausgespielt. Spontan fallen einem folgende Möglichkeiten ein: weiterlesen