JQuery Kochbuch (German Edition)

isValid ? 'removeClass' : 'addClass';

// Fehlermeldung zeigen [addClass]
// Fehlermeldung verbergen [removeClass]
$('#errorMessage_' + name)[method]('showErrorMessage'); if ( type == 'checkbox' || type == 'radio' ) { // Bei Radio Button oder Checkbox alle Inputs mit dem gleichen Namen finden $('input[name="' + name + '"]').each(function(){ // Alle -Tags der Inputs anpassen, (this==) $('label[for="' + this.id + '"]')[method]('error'); }); } else { // Für alle anderen Inputs nur ein anpassen $('label[for="' + id + '"]')[method]('error'); } // nach der initialen Validierung beim Ändern revalidieren können
$element
    .unbind('change.isValid')
    .bind('change.isValid',function(){ validateElement.isValid(this); });
    Hätten wir diesen Code mit der Punkt-Syntax geschrieben, hätte er doppelt so viele Zeilen gehabt. Und mit dieser neuen Logik benötigt nur ein Radio Button (oder eine Checkbox) in einer
name
-Gruppe das Attribut
class="required"
, damit alle anderen Elemente in dieser Gruppe ebenfalls korrekt angepasst werden.
    Was geschieht, wenn JavaScript deaktiviert ist? Die Form wird ohne Validierung auf Client-Seite abgeschickt. Stellen Sie daher immer sicher, dass Sie auch auf Server-Seite eine Überprüfung vornehmen. Verlassen Sie sich nicht nur auf JavaScript. Gibt der Code auf Server-Seite die Form mit Fehlern zurück, dann können die gleichen Klassen für die gleichen Elemente genutzt werden. Sie brauchen keine Inline-Style-Tags oder eigenen Code, um die vom Server gemeldeten Fehler anders zu behandeln.

Chapter 11. Verbesserungen von HTML-Forms durch Plugins
    Jörn Zaefferer

Einleitung
    Forms werden für die Interaktion von Web-Anwendungen mit Benutzern sehr häufig genutzt. Verbessert man diese Interaktion, dann ist das ein Gewinn für die ganze Anwendung.
    jQuery und eine ganze Reihe von Plugins bieten vorgefertigte und konfigurierbare Lösungen für eine bessere Interaktion an, wobei immer auf progressive Verbesserung geachtet wird.
    Jedes Problem lässt sich durch eine jQuery-Lösung angehen, die man komplett selbst aufbaut, aber mit Plugins erhalten Sie eine Reihe von Vorteilen:
    Man muss nicht das Rad neu erfinden.
Die Funktionalität ist auf vielen Browsern umfassend getestet.
Man spart sich eine Menge Arbeit, die in den Details stecken.
Alles funktioniert auch unter extremen Bedingungen.
    Jedes Rezept wird die Vor- und Nachteile des Plugins behandeln und auch darlegen, wann es sinnvoller ist, selbst zu programmieren.
    Grundlegendes Vorgehen
    Das grundlegende Vorgehen bei der Verwendung von jQuery-Plugins ist immer das Gleiche. Zunächst binden Sie jQuery selbst ein, dann die Plugins. Manche Plugins benötigen zudem ein Stylesheet. Bei den meisten Plugins ist Markup erforderlich, mit dem sie arbeiten können, und ein oder zwei Zeilen Code, die dieses Markup-Element selektieren und etwas damit anstellen. Nach den üblichen Namenskonventionen würde ein Plugin »slideshow« wie folgt genutzt werden:



    
    
    
    


    

...

    Das für eine Slideshow notwendige Markup unterscheidet sich von einem Slider oder einer Form-Validierung, daher sollte man in der Dokumentation und in den Beispielen für das Plugin danach suchen. In den folgenden Rezepten wird ebenfalls darauf eingegangen.

Forms überprüfen
    Problem
    Bei den meisten Forms zum Registrieren muss man eine E-Mail-Adresse, ein Passwort (doppelt), einen Benutzernamen und ein paar andere Informationen angeben, wie zum Beispiel ein Geburtsdatum. Das gilt für E-Mail-Dienste, Webshops oder Foren.
    Stellen Sie sich Herrn Mustermann vor, der in einem Webshop einen neuen Monitor kaufen möchte, und der zum Registrieren ein Ccaptcha angeben muss (eine gerade noch lesbare zufällige Zeichenfolge, die einen echten Benutzer von einem Bot unterscheiden soll). Er füllt die Form komplett aus (was einige Zeit dauert) und schickt sie dann ab. Nach etwa fünf Sekunden wird die Form erneut angezeigt – diesmal mit einer Fehlermeldung: er hat vergessen, die Straße anzugeben. Also holt er das nach und schickt die Form erneut ab. Weitere fünf Sekunden vergehen – jetzt hat er das Passwort und das Captcha