Clientseitige Validatoren mit ASP.NET MVC 3 und unobstrusive JavaScript (Teil 1 von 3)

ASP.NET MVC 3 verwendet standardmäßig unobstrusive JavaScript für das Validieren von Eingaben, indem die Validierungslogiken mit HTML 5-Tags und -Attributen beschrieben und mittels jQuery zum Leben erweckt werden. Das Ergebnis manifestiert sich in kürzeren und besser lesbaren HTML-Seiten, die ohne bzw. zumindest mit weniger eingebetteten JavaScript-Blöcken auskommen. Darüber hinaus ist client-seitiges Validieren ab Version 3 standardmäßig aktiviert. Konfiguriert können diese beiden Aspekte über die web.config werden:

<appSettings>
       <add key="ClientValidationEnabled" value="true"/> 
       <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>  

In weiterer Folge wird davon ausgegangen, dass diese beiden Parameter, wie oben gezeigt, jeweils auf ihren Standardwert (true) belassen wurden.

Um ein Validierungs-Attribut, welches nicht nur serverseitig sondern auch clientseitig Anwendung findet, ist - wie nachfolgend demonstriert - von ValidationAttribute abzuleiten sowie zusätzlich das Interface IClientValidatable zu implementieren. Dieses Interface gibt die Methode GetClientValidationRules, welche Beschreibungen der durchzuführenden Validierungslogiken zurückliefert, vor.

public class HamsterFarbeValidationAttribute : 
                       ValidationAttribute, IClientValidatable
{
    protected override ValidationResult IsValid(
                           object value, 
                           ValidationContext validationContext)
    {
        Hamster h = validationContext.ObjectInstance as Hamster;

        string farbe = value.ToString();

        if (h.Name == "Krümel" && farbe != "gold")
        {
            string msg = "Krümel ist doch ein Goldhamster!";
            return
                new ValidationResult(msg);

            // für weitere Infos siehe [Nils Holgersson]
        }
        return ValidationResult.Success;
    }

    // Client-seitige Validierung
    public IEnumerable<ModelClientValidationRule>
             GetClientValidationRules(
                   ModelMetadata metadata, 
                   ControllerContext context)
    {
        string msg = "Krümel ist doch ein Goldhamster!";

        var rule = new ModelClientValidationRule
        {
            ErrorMessage = msg,
            ValidationType = "hamsterfarbe"
        };
            
        rule.ValidationParameters.Add("casesensitive", "false");
        
            

        // Für weitere Infos siehe [Nils Holgersson]

        yield return rule;
    }

}

Um das Validierungsattribut nun anzuwenden, wird die zu validierende Eigenschaft damit annotiert.

public class Hamster
{
    public int Id { get; set; }
    public string Name { get; set; }

    [HamsterFarbeValidation]
    public string Farbe { get; set; }
  
}

Nun muss noch das HTML-Markup um die clientseitigen Validierungslogiken erweitert werden. Dazu sind zwei Schritte nötig: Zum einen muss die Validierungsmethode an sich bereitgestellt werden und zum anderen muss ein Adapter, welcher die von ASP.NET MVC generierten HTML 5-Attribute auf diese Validierungsmethode mappt, erstellt werden. Ersteres wird im nachfolgenden Listing mit der Methode $.validator.addMethod bewerkstelligt; letzteres mit $.validator.unobtrusive.adapters.addBool. Der String hamsterfarbe, welcher übrigens nur aus Kleinbuchstaben bestehen darf, benennt die in Form einer Validierungsregel hinzugefügte Validierungslogik; der selbe String in der zweiten Methode den Adapters. Herrscht hier, wie im betrachtenten Beispiel, Namensgleicheit, wird der Adapter mit der Validierungsregel verbunden. Ansonsten müsste der Name der Validierungsregel im zweiten optionalen Parameter an die Methode addBool übergeben werden.

$.validator.addMethod(
    "hamsterfarbe",
    function (value, element) {

        value = value.toLowerCase();

        if ($("#Name").val() == "Krümel" 
             && value != "gold") return false;

        return true;
    });

$.validator.unobtrusive.adapters.addBool("hamsterfarbe");

Die restliche Seite gestaltet sich wie gewohnt, wobei durch Verwendung der Methode ValidationMessageFor oder ValidationMessage eventuelle Fehlermeldungen auszugeben sind (siehe nachfolgendes Listing).

<div class="editor-label">
    @Html.LabelFor(model => model.Farbe)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Farbe)
    @Html.ValidationMessageFor(model => model.Farbe)
</div>

Wird die Seite nun ausgeführt, kommt man in den Genuss der benutzerdefinierten Validierung via JavaScript:

Die jQuery-Methode addBool ist übrigens die einfachste Methode, um Adaptoren bereitzustellen. Weitere Möglichkeiten werden im nächsten Teil dieser Artikel-Serie besprochen.