JQuery Kochbuch (German Edition)

email:true, messages:{required:"Required",
email: "Keine gültige E-Mail-Adresse"}}"/>
    So können Sie eine Meldung für jede Regel angeben, was sich auch über die Option
messages
erzielen lässt:
$("#myform").validate({
    messages: {
     email: {
     required: "Required",
     email: "Keine gültige E-Mail-Adresse"
     }
    }
});
    Auch hier beziehen sich die Schlüssel – hier
email
– auf die Namen der Eingabefelder, nicht auf die ID.
    Bei dynamischeren Szenarien kann die Plugin-Methode
rules
genutzt werden:
$("#myform").validate();
// irgendwann später
$("#email").rules("add", {
    messages: {
     email: "Gültige E-Mail-Adresse angeben!"
    }
});
    Nutzen Sie eine der Alternativen zum Attribut
title
, wenn Sie einen normalen Titel verwenden, dann können Sie dafür sorgen, dass das Plugin das Attribut für Meldungen nutzt:
$("#myform").validate({
    ignoreTitle: true
});
    Lokalisierung
    Die Standard-Meldungen sind in Englisch formuliert (abgesehen von denen für
dateDE
und
numberDE
). Das Plugin stellt (zum Zeitpunkt der Entstehung dieses Textest) zudem 17 Lokalisierungen bereit. Diese lassen sich ganz einfach verwenden: Kopieren Sie die für Sie notwendige Datei
messages_xx.js
in Ihr Projekt und binden Sie es nach dem Validierungs-Plugin ein. So sieht zum Beispiel der Code für die schwedische Lokalisierung aus:



    Sie erhalten dann anstelle von »Please enter a valid email address.« den Text »Ange en korrekt e-postadress.«
    Fehler-Element
    Standardmäßig werden die Fehlermeldungen im DOM direkt nach dem Element eingefügt, auf das sie sich beziehen. Eine Fehlermeldung wird als Label-Element eingefügt, wobei das Attribut
for
auf die
id
des überprüften Elements gesetzt wird. Nutzt man ein Label mit dem Attribut
for
, dann setzt der Browser den Fokus auf das Eingabefeld, sobald man auf das Label klickt. So kann der Anwender die Fehlermeldung anklicken und damit zum ungültigen Feld springen.
    Wenn Sie einen anderen Element-Typ benötigen, verwenden Sie die Option
errorElement
:
$("#myform").validate({
    errorElement: "em"
});
    Das Attribut wird dann immer noch das Attribut
for
verwenden, aber die automatisch erstellte Verbindung durch den Browser gibt es dann natürlich nicht.
    Layout
    Wenn Sie die Position beeinflussen möchten, an der die Fehlermeldung eingefügt wird, ist die Option
errorPlacement
nützlich. Hier haben wir zum Beispiel eine Form, die eine Tabelle als Layout verwendet. In der ersten Spalte befindet sich das normale Label, in der zweiten das Eingabefeld und in der dritten die Meldungen:

    
    
    
    
    
    
    
    

Vorname

maxlength="100" />

$("#signupform"). validate ({
    errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
    }
});
    Häufig will man auch eine allgemeine Meldung oberhalb der Form anzeigen. Dies kann man über die Option
errorContainer
erzielen:
$("#myform"). validate ({
    errorContainer: "#messageBox1"
});
    In diesem Beispiel würde ein Element mit der ID
messageBox1
angezeigt, wenn die Form ungültig ist. Ist sie korrekt, dann würde das Element verborgen werden.
    Dies lässt sich mit der Option
errorLabelContainer
kombinieren. Wenn man diese angibt, werden die Fehler-Label nicht neben ihr Eingabefeld gesetzt, sondern einem einzelnen Element über oder unter der Form hinzugefügt. Kombiniert mit den Optionen
errorContainer
und
wrapper
werden die Meldungen einer Liste mit Fehlern oberhalb der Form hinzugefügt:

var container = $('div.container');
// Form überprüfen, wenn sie abgeschickt wird
$("#myform").validate({
    errorContainer: container,
    errorLabelContainer: $("ul", container),
    wrapper: 'li'
});
    Umgang mit submit
    Wenn die Form gültig ist, muss sie abgeschickt werden. Standardmäßig funktioniert das wie bei jedem normalen Form-Submit. Um die Form per Ajax abzuschicken, kann die Option
submitHandler
genutzt werden – zusammen mit dem Form-Plugin