Roberto’s Blog

ASP.NET unobtrusive validation - Clientseitige Adapter

1. Teil 1: ASP.NET Mvc 3 unobtrusive validation
2. Teil 2: Unobtrusive validation - Clientseitige Adapter
3. Teil 3: Unobtrusive validation - Eigene Adapter erstellen

Wie bereits im letzten Post beschrieben, gibt es seit der dritten Version des MVC Frameworks die Möglichkeit, Formular Validierungen über HTML 5 kompatible Attribute zu machen.

Diese werden clientseitig über Adapter umgesetzt, die die entsprechenden Parameterwerte aus den HTML 5 Attributen in die für jQuery Validate vorgesehenen Metadaten konvertieren.

In diesem Post wird nicht genauer auf das jQuery Validate Plugin eingegangen, sondern mehr über die Logik und Konvertierungsmechanismen der Adapter.

Mehr Informationen zu jQuery Validate finden sich hier.

Als weiteres, für den Post relevanteres Plugin findet sich das jQuery.validator.unobtrusive.adapters.js im Ordner Scripts eines jeden MVC3 Projekttemplates.

Im Script gibt es eine Registrierungsmethode "add", sowie einige allgemeine Methoden "addBool", "addSingleVal" und "addMinMax".

Im Grunde sind die meisten Fälle damit abgedeckt, als Beispiel ein Auszug aus der eben genannten Datei:

adapters.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");
adapters.addSingleVal("accept", "exts").addSingleVal("regex", "pattern");
adapters.addMinMax("length", "minlength", "maxlength", "rangelength").addMinMax("range", "min", "max", "range");

Bevor genauer auf die einzelnen Methoden eingegangen wird, eine kurze Erklärung zur Methode "add", die intern von jeder aufgerufen wird:

adapters.add = function (adapterName, params, fn)
{
....
}

• adapterName: Ist der Name des zu hinzuzufügenden Adapters. Im Prinzip nichts anderes, als der im Attribut data-val-<Name> vorkommenden Platzhalter.

• params: Ist ein optionales Array aus Parametern, die aus den Attributen data-val-<Name>-<Paremter> extrahiert werden.

• fn: Ist die Funktion, welche die Werte der Html Attribute in die für "jQuery Validate" benötigten Regeln und/oder Mitteilungen konvertiert.

Die Methode addBool macht somit einen in etwa ähnlichen Aufruf:

add("email", function(options) {
    ...
    options.rules["required"] = true;
    ...
});

Hinweis: Das option Element beinhaltet folgende Werte:

•     element: Das HTML Element dem der Validator zugeordnet ist.

•     form: Das HTML Form Element.

•     message: Die Ausgabe, die ebenfalls aus den HTML Attributen extrahiert wird.

•     params: Ein Array Element mit Werten, die aus den HTML Attributen extrahiert werden. (Bspw. var min = options.params.min)
  

•     rules: Das Array Element, das die Namen und Werte beinhaltet, die wiederum für die jQuery Validate Regel benötigt werden. (Bspw. ["required"] = true)

•     messages: Ein Array Element, das die Namen und Werte beinhaltet, wobei der Name für die verletze Regel und der Wert für die dazugehörige Ausgabe stehen. (Bspw. ["required"] = "Das Feld darf nicht leer sein.")

Nun sollte auch die addSingleValue anhand eines Beispiels verständlich werden:

adapters.addSingleVal("regex", "pattern");

Gegeben ist ein HTML Element, wobei die Eingabe nicht leer sein kann und es nur Großbuchstaben beinhalten darf. (= dem Regex [A-Z] enstprechen).

<input ...
data-val="true"
data-val-required="Das Feld darf nicht leer sein."
data-val-regex="Das Feld darf nur Großbuchstaben beinhalten."
data-val-regex-pattern="[A-Z]" />

Folgende Werte würden daraus entstehen:

-> options.rules["required"] = true
-> options.rules["regex"] = "[A-Z]"
-> options.messages["required"] = "Das Feld darf nicht leer sein."
-> options.messages["regex"] = "Das Feld darf nur Großbuchstaben beinhalten."

Und natürlich würde auch addMinMax nichts anderes machen, als ein paar "rules" wie bspw. "min", "max" zu setzen.

Am Besten einfach ein paar Testelemente machen und mit der Firefox Extension Firebug ansehen.

Im nächsten Teil wird dann genauer auf die Erstellung eigener Adapters eingegangen!