JQuery Kochbuch (German Edition)

»select-multiple«-

ist hier nicht betroffen, da dessen

-Elemente abgewählt werden können.
Elemente der Art

und

müssen mindestens ein selektiertes Element in ihrer Gruppe besitzen.
    Die Anweisung
switch(){}
wird genutzt, da sie effizienter als eine Reihe von
if(){}else if(){}
ist. Zudem können Elemente mit gleicher Überprüfung auch gruppiert werden, indem man die
break;
-Anweisung zum Trennen dieser Gruppen nutzt.
    Das Objekt
validateElement
befindet sich im globalen Gültigkeitsbereich, weil es vielleicht auch von anderen Forms genutzt werden kann. Zudem sorgt es durch das »Sammeln« der Validierungsmethoden dafür, dass der globale Gültigkeitsbereich nicht vermüllt wird – in Zukunft können dann dem Objekt Hilfsmethoden hinzugefügt werden, ohne dass man sich um Namenskonflikte Sorgen machen muss. So könnte zum Beispiel eine Methode
stripWhitespace()
wie folgt implementiert werden:
var validateElement = {

    stripWhitespace : function(str){
     return str.replace(/\s/g,'');
    },
    isValid : function(element){

     //... Code ausgeschnitten ...//

     case 'text':
     case 'textarea':
     case 'password':
     // ist die Länge nach dem Entfernen von Whitespace gleich 0, ist es nicht
     // gültig
     if ( this.stripWhitespace(value).length == 0 ){ isValid = false; }
     break;

     //... Code ausgeschnitten ...//

    } // Ende von validateElement.isValid()
}; // Ende des Objekts validateElement
    Beim Anzeigen und Verbergen von Fehlermeldungen habe ich eckige Klammern für das Aufrufen der jQuery-Methoden
.addClass()
und
.removeClass()
genutzt:
// anstatt $(selector).method nutzen wir $(selector)[method]
// Wahl der Methode
var method = isValid ? 'removeClass' : 'addClass';

// Fehlermeldung anzeigen [addClass]
// Fehlermeldung verbergen [removeClass]
$('#errorMessage_' + name)[method]('showErrorMessage');
$('label[for="' + id + '"]')[method]('error');
    Der Code mit eckigen Klammern ist funktional identisch mit der »normalen« Punkt-Notation:
if (isValid) {
    $('#errorMessage_' + name).removeClass('showErrorMessage');
    $('label[for="' + id + '"]').removeClass('error');
} else {
    $('#errorMessage_' + name).addClass('showErrorMessage');
    $('label[for="' + id + '"]').addClass('error');
}
    Wenn wir beim Abschicken validieren, ist die Punkt-Notation sauberer und besser lesbar. Aber wir wollen die Lösung mit den eckigen Klammern noch erweitern, um (nach der initialen Validierung) eine Revalidierung beim Event
change
durchführen zu können. Damit erhält der Anwender eine direkte Rückmeldung auf seine neuen Antworten, ohne den Button zum Abschicken erneut anklicken zu müssen. Der folgende Code funktioniert noch nicht so wie erwartet (siehe den nächsten Abschnitt für die richtige Lösung), aber er zeigt, wo man das
change
-Event per
.unbind()
entbindet und per
.bind()
bindet:
// anstatt $(selector).method nutzen wir $(selector)[method]
// wähle die richtige Methode, aber wähle weise
var method = isValid ? 'removeClass' : 'addClass';

// Fehlermeldung zeigen [addClass]
// Fehlermeldung verbergen [removeClass]
$('#errorMessage_' + name)[method]('showErrorMessage');
$('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); });
    ----
    Note
    Da wir das
change
-Event bei jeder Validierung entbinden und wieder binden, habe ich den Event-Namensraum
.isValid
hinzugefügt, um es direkte ansprechen zu können. Hat ein Form-Element andere
change
-Events gebunden, dannbleiben sie so erhalten.
    ----
    Das Problem am vorigen Code ist nicht die Syntax sondern die Logik. Die Radio Buttons im HTML-Code haben das Attribut
class="required"
. Das bedeutet, beim Validieren der gesamten Form wird jeder Radio Button validiert und (noch wichtiger) jedes

eines Radio Button erhält eine Klasse (oder sie wird wieder entfernt), um den Fehler anzuzeigen. Wenn wir aber eine Revalidierung mit dem Element-spezifischen
change
-Event erlauben, wird nur das

des entsprechenden Radio Buttons aktualisiert – die anderen behalten ihren Fehlerstatus bei. Um dies zu beheben, muss ein einzelnes
change
-Event alle Radio Buttons in der
name
-Gruppe begutachten, um die Klassen aller

s simultan anzupassen:
// anstatt $(selector).method nutzen wir $(selector)[method]
// wähle die richtige Methode, aber wähle weise
var method =