ASP.NET MVC 3: Vereinfachte clientseitige Validierung mit Validierungsattributen und jQuery

Achtung: Dieser Beitrag geht davon aus, dass die ab der finalen Version von ASP.NET MVC 3 standardmäßig verwendete "unobstrusive" Validation NICHT verwendet wird. Falls dies doch der Fall ist (was in den meisten Fällen sinnvoll sein dürfte), weicht die Vorgehensweise von der hier beschriebenen etwas ab. Informationen dazu finden sich hier.

Zur Verbesserung der Benutzerfreundlichkeit erlaubt ASP.NET MVC das Bereitstellen von clientseitigen auf JavaScript basierenden Validierungsroutinen, die ergänzend zur serverseitigen Validierung ausgeführt werden. Durch Unterstützung des Interfaces IClientValidatable wird solch ein Vorhaben ab Version 3 erleichtert.

Das nachfolgende Listing demonstriert die Verwendung dieses Interfaces. Es zeigt ein Validierungsattribut, das IClientValidatable und damit auch dessen Methode GetClientValidationRules implementiert. Die Aufgabe dieser Methode besteht im Bereitstellen von ModelClientValidationRule-Instanzen, wobei jede dieser Instanzen eine auszuführende javascript-basierte Validierungs-Routine beschreibt. Im betrachteten Beispiel wird eine solche Instanz, die auf die Methode HamsterFarbe verweist, zurückgeliefert. Zusätzlich wird eine Fehlermeldung (ErrorMessage) sowie ein Wert für den benutzerdefinierten Parameter autocorrect hinterlegt.

public class HamsterFarbeValidationAttribute : ValidationAttribute, IClientValidatable
{
    // Client-seitige Validierung
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = "Aber Krümel ist doch ein Goldhamster !!!",
            ValidationType = "HamsterFarbe"
        };
        rule.ValidationParameters.Add("autocorrect", true);
    
         // Für weitere Infos siehe Nils Holgersson

        yield return rule;
    }

    [...]
} 

In den zu validierenden Views sind, wie nachfolgend gezeigt, zusätzlich die entsprechenden JavaScript-Libraries einzubinden. Daneben wird im Dictionary Sys.Mvc.ValidatorRegistry.validators unter dem im Validierungs-Attribut definierten Namen eine JavaScript-Methode hinterlegt. Diese nimmt ein JavaScript-Gegenstück der jeweiligen ModelClientValidationRule-Instanz entgegen und liefert eine dazu passende Validierungsfunktion zurück. Es handelt sich somit um eine Funktion, die eine Validierungsfunktion liefert. Zusätzlich ist die clientseitige Validierung, wie bereits in der Vorgängerversion, durch einen Aufruf der Methode Html.EnableClientValidation zu aktivieren.

<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">
</script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.debug.js">
</script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.debug.js">
</script>

<script type="text/javascript">
    // Funktion HamsterFarbe
    Sys.Mvc.ValidatorRegistry.validators["HamsterFarbe"] = function (rule) {
        var autocorrect = rule.ValidationParameters["autocorrect"];
        // Zurückgeliefert wird die zu verwendende Validierungs-Funktion
        return function (value, context) {
            var name = $("#Spitzname").val();
            var info = "";
            if (name == "Krümel" && value != 1) {
                if (autocorrect) {
                    $("#FarbeId").val(1);
                    info = "\nDer Wert wurde automatisch korrigiert!";
                }
                return rule.ErrorMessage + info;
            }
            return true;
        };
    };
</script>
@{ Html.EnableClientValidation(); }

Wird das Validierungsattribut nun, wie im nachfolgenden Listing gezeigt, angewandt, kommt man in den Genuss einer client-seitigen Validierung, welche bekanntlich aus Sicherheitsgründen nur eine Ergänzung zu und kein Ersatz für entsprechende Server-seitige Validierungen darstellt.

class Hamster {
    [HamsterFarbeValidation]
    public int FarbeId { get; set; }
}