Blog

Kategorien anzeigen

Barrierefreie Live Validierung von Formularen mit jQuery

Avatar of Felix NagelFelix Nagel - 16. November 2009 - jQuery, Accessibility

© jQuey Logo: The jQuery Project

Im Zuge meiner Diplomarbeit bei der Full Service Internetagentur Namics habe ich einige barrierefreie Applikationen für jQuery entwickelt die den Richtlinien der W3CWCAG 2.0 und ARIA entsprechen.

Eine theoretische Ausarbeitung zur Entwicklung dieser Applikationen und der dazugehörigen Theorie findet ihr in meiner Diplomarbeit. Die dort enthaltenen Hintergrundinfos können wertvolle Argumentationshilfen sein.

 

Die 4 Widgets (Live Validierung, Lightbox, Tabs, sortierbare Tabellen) werde ich in diesem und folgenden Posts vorstellen. Den Anfang macht die Live Formular Validierung.

Live Formular Validierung

Das Widget bietet die Möglichkeit die Daten per AJAX (auch Dateien) oder, nativ, per POST zu versenden.

Neben den Standard Validierungspattern wie Email, URL, Datum, Länge, Pflichtfeld und Vergleich mit anderen Feldern können sehr einfach eigene RegEx Pattern oder völlig eigene Validierungsfunktionen definiert werden. Auch eine Möglichkeit Captchas einzubauen wurde integriert.

Zur Kommunikation mit anderen Komponenten können Callbacks und (pseudo) öffentliche Funktionen genutzt werden.

 

Ich nutze hier ARIA Eigenschaften, werft einen Blick in Firebug.

 

Komplette Feature Liste bei GitHub

Fakten aller Widgets

  • WAIWCAG 2.0 und WAIARIA konform
  • Workaround für alte Screenreader
  • Wiki und kommentierter Quellcode (Englisch)
  • Genaue Beschreibung in meiner Diplomarbeit
  • Inklusive minifizierter Version
  • Funkioniert out-of-the-box, aber trotzdem einfach zu erweitern
  • jQuery UI Theme Switcher kompatibel

How To

Man nehme eine valide Tabellenstruktur und versehe alle Formularelemente mit IDs und Labeln. Wenn Feld und Label oder die Fehlermeldung anders angeordnet werden sollen, können im gut durchkommentiertem Quellcode einfach Anpassungen vorgenommen werden. Weiterentwicklung auf diesem Gebiet ist bereits geplant.

<form action="server.php" method="post" enctype="multipart/form-data">
	<div id="ui-formular-info">
		Felder mit einem <em>*</em> sind Pflichtfelder.
	</div>
	<div id="ui-formular-error"></div>
	<fieldset>
		<legend>Formular</legend>		
		<label for="email_adress">Email-Adresse</label>
		<input type="text" id="email_adress" name="inputtext" />
		.
		.
		.
		<input type="submit" id="submit" value="Absenden" />
	</fieldset>	
</form>
Tabellen HTML

Natürlich müssen wie üblich die nötigen Scripte geladen werden. Auf die Einbindung von CSS verzichte ich in diesem Beispiel.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.formValidator.js"></script>

Die Konfiguration des Widgets erfolgt in Form eines verschachtelten Arrays innerhalb des forms Array. Die ID des Formularelements wird als index genutzt. Jedes so definierte Array muss wiederum ein rules und ein msg Array enthalten.

 

Für jede Validierungsregel in rules muss eine Fehlernachricht in msg definiert werden. Werfe einen Blick ins Wiki oder die js Datei für um alle Funktionen kennenzulernen.

 

Weitere Optionen können wie bei jQuery gewohnt gesetzt werden.

$(function() {      
    var formular = $("form").formValidator({
      forms: {      
        email_adress: {
          rules: {
            required: true,    
            regEx: "email",
            lengthMin: 5,
            lengthMax: 25
          },
          msg: {
            required: "Necessary field message.",  
            regEx: "No valid email failure message.",
            length: "Length failure message (One for max and min)."
          }
        }
      },
      validateLive: true,
      submitHowTo: "ajax",
      submitUrl: "server_ajax.php",        
      onInit: function(){ 
        console.warn("Init abgeschloßen");
      }    
    });      
});

Demo und Download

Dieses und alle anderen Widgets sind über GitHub verfügbar. Dort ist auch das Wiki und eine Art Bugtracking.

 

 

Komplexere Demo im PopUp

 

jQuery Accessible RIA auf GitHub

 

 

Das ganze steht unter einer Creative Commons BY-SALizenz, kann also auch kommerziell benutzt werden.

 

Kommentare (bei der ihr auch eine Live Demonstration erleben könnt) sind sehr willkommen. Erste Verbesserungen sind bereits eingeflossen!

 

  

 Weitere jQuery Widgets aus meiner Diplomarbeit:

 

11 Kommentare  

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

11 Kommentare

Felix Nagel

10. März 2010

Muss sein

Sei mir nocht bös, aber ich weiß schon was ein PHP header Befehl ist. Nur kannst du den nicht per AJAX ausführen.

Carsten Lippert

10. März 2010

fadeout fadein

Hallo Felix,


ja, ich muss noch viel lesen. Auf der Seite mit den Tuts war ich schon mal, aber die Fülle hat mich dann doch erschlagen. Ich werde das mit dem fadein ausprobieren. Das mit dem header("location: URL") wirkt im Prinzip so wie ein meta refresh mit 0 Sekunden.


Vielen Dank


Carsten

Felix Nagel

10. März 2010

fadeOut versus fadeIn

Hallo Carsten,


also du kannst eben einfach im gleichen Zuge das Formular verstecken und deinen div einblenden. Das könnte dann so in etwa aussehen:


onShowSuccess: function(event, value){

if (value == "true") {

window.setTimeout(function() {

formular.fadeOut();

$("#myDiv").fadeIn();

}, 1000);

} else {

console.warn("Server said: not sended :-(");

}

},


Was du mit dem location header willst verstehe ich nicht ganz, daskannst du per AJAX nicht aufrufen. Was du aber kannst ist per AJAX neuen Inhalt darstellen oder aber ein meta refresh nachladen, damit kannst du auf eine andere Seite. Allerdings würde ich dann gleich POST als Absendemethode nutzen, da ist der redirect praktisch eingebaut und nicht von JS abhängig.


Vielleicht solltest du einen Blick in die API bzw. die Tuts docs.jquery.com/Tutorials werfen.



Hoffe das hilft dir weiter, Grüße


Felix

Carsten Lippert

09. März 2010

Fade out des Formulars ist schön, aber...

Hallo,

ich versuche noch nicht allzu lange mit JQuery die Funktionalität von Webseiten zu verbessern, daher fehlt mir noch eine Menge wissen. Die Funktion des fade out für das Formular finde ich effektvoll, doch habe ich noch keinen Weg gefunden, wie ich dann anstelle des Formulars neuen Inhalt an die Stelle schreiben kann. Es ist ja nicht sinnvoll, den Leser dann eine leere Seite zu zeigen. Schön wäre es ja, man könnte ein div, welches im Grundzustand unsichtbar ist, dann sichtbar schalten. Ich habe schon versucht, mittels PHP eine Variable durchzuschleusen und als letzten Schritt einen header("location: URL") wirken zu lassen, um auf eine neue Seite zu schalten. Hat nur nicht funktioniert. Das mit dem div wäre auch schöner.


hg aus e Carsten

Felix Nagel

04. Februar 2010

jQuery UI 1.7.1 zu 1.8rc1

Hey Frank,

 

es geht nicht um das Update von jQuery 1.3.x auf 1.4.1 sondern vielmehr um jQuery UI 1.7.1 zu jQuery 1.8.x. Genauer um die Widget Factory. Diese hat nun keine defaults mehr, sondern (wie bei der normalen plugin Entwicklung) nur noch options. Frag nicht wie lange ich gebraucht hab um das herauszufinden ;-)

 

Also verschieb einfach das (am Ende der ui.formValidator.js Datei befindlichen) defaults Array nach ganz oben und bennen ihn in options um. Das geht dann auch für die alte Version.

 

Die neue Version ist eigentlich fertig und getestet aber ich kam noch nicht dazu das Wiki etc anzupacken.Das WE schaff ich das auf jeden Fall.

 

ps: Sie haben post ;-)

Frank

04. Februar 2010

Hallo Felix


Sehr schönes Widget - macht optisch echt was her!


Da ich bei meinem Projekt aber schon jquery 1.4 einsetze läuft es leider nicht :( Kannst Du schon in etwa sagen, wann die neue Version zum Download bereit steht? Gerne kannst mir Deine aktuelle Arbeitsversion vorab schon mal mailen - dann kann ich ein bisschen spielen :)



Danke für Deine Zeit und viele Grüße,

Frank

Felix Nagel

29. Januar 2010

Neue Version kommt bald

Hey Kevin, freut mich das dir mein Widget gefällt.

 

Im errorsArray speichere ich die momentanen Fehler und ihren Status (neu, alt, korrigiert). Es wird in den default settings (siehe Ende der js Datei) angelegt und anschließend mit den ID als Indize erweitert. Das kannst du übrigens auch noch genauer in meine Diplomarbeit nachlesen (klick).

Um mehr zu sagen müsst ich ne Demo sehen.

 

Versuch mal den Callback "onErrors". Wenn der aufgerufen wird sind zur Zeit keine Fehler mehr im Formular. Müsste sein was du suchst. Scroll mal hier ganz runter, da stehen mehr Infos zu den Callbacks: wiki.github.com/fnagel/jQuery-Accessible-RIA/formular

 

Allerdings hab ich hier schon eine neue Version in der ich einige Bugfixes sowie die Kompatibilität mit jQuery 1.4.1 und UI 1.8 eingebaut habe. Außerdem wird die Verwaltung der Fehler angepasst, damit eigene Fehlermeldungen möglich sind.

 

Wenn du magst schick ich dir meine aktuelle Arbeitskopie, wobei ich die erst am WE für beide Versionen von jQuery gegenteste.

Kevin

29. Januar 2010

errorsArray?

Hallo Felix,


dein Script hat mir sehr weitergeholfen.

Ich hätte da mal zwei kurze Fragen:


1. Ich versuche dein Script zusammen mit jquery.ui.tabs.js (Original) zu verwenden. Ich habe ein Formular was aus mehreren Fieldsets inkl. entsprechender Formularfelder besteht. Die Fieldsets sind gleichzeitig die Tabs.


Ich würde gerne verhindern, dass zu einem anderen Tab/Fieldset gewechselt werden kann, solange noch nicht-valide Werte existieren.

Könntest du mir damit weiterhelfen?


2. Firebug spuckt mir folgenden Fehler aus:

errors is undefined

errors[id] = [];


Wenn ich errorsArray: als Option anlege funktioniert es soweit.

Allerdings bin ich mir nicht sicher, ob dies der richitge Weg ist.

Wie gebe ich korrekterweise Fehler aus?


Danke schon mal & beste Grüße

Sascha

02. Dezember 2009

Vielen Dank, ich werde das mal testen :-)

Felix Nagel

02. Dezember 2009

Du suchst einen Callback!

Hey Sascha,

 

dazu musst du einen Callback benutzen. Etwas in die Richtung sollte dem was du brauchst recht nah kommen:

<pre>
onShowSuccess: function(){
window.setTimeout(function() {
formular.fadeOut();
}, 1000);
}</pre>

 

formular ist dabei die vorher festgelegte Instanz des Widgets.

 

 

Hab dir ne Mail mit einem Minimal Bsp geschickt.

 

Grüße Felix

 

Sascha

02. Dezember 2009

Kleine Frage

Hallo,

super Script wie ich finde und genau das was ich gesucht habe.

Aber, ich versuche schon eine ganze Weile, das Formular nach erfolgreichem ansenden auszublenden, nur leider bin ich auf den Gebiet noch Anfänger.

Vielleicht einen Tip für mich?