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

Im ersten Teil dieser Artikelserie wurde gezeigt, wie man mit ASP.NET MVC 3 und jQuery clientseitige Validierungslogiken hinzufügen kann. Dazu wurde die Methode $.validator.unobtrusive.adapters.addBool("hamsterfarbe") verwendet, um die zuvor definierte Validierungs-Regel für die Verwendung mit unobstrusive Validation zu aktivieren. "Aktiviert" bedeutet hierbei, dass die HTML5-Validierungsregel hamsterfarbe, die deklarativ für einzelne Elemente definiert wird, durch die gleichnamige jQuery-Validierungsregel implementiert wird. Weichen die Namen der beiden Validierungsregeln voneinander ab, kann eine Überladung dieser Funktion, welche beide Namen entgegennimmt, herangezogen werden. Der Name addBool ist hier etwas irreführend, denn die Methode aktiviert einfach eine Validierungs-Regel, die abgesehen vom Wert und einen Verweis auf das zu validerende Element keine weiteren Parameter entgegennimmt. Warum Sie addBool heißt wird im Zuge des dritten Teils dieser Serie, in der tiefer in die Thematik eingetaucht wird, erläutert.

Neben addBool stehen noch weitere Methoden zum Aktivieren von Validierungs-Regeln zur Verfügung. Beispielsweise wird mit addSingleValue definiert, dass an die zu aktivierende Regel ein bestimmter Parameter übergeben werden soll. Im nachfolgenden Beispiel handelt es sich dabei um den Parameter casesensitive.

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

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

        return true;
    });

$.validator.unobtrusive.adapters.addSingleVal("hamsterfarbe", "casesensitive");

Der Wert für den Parameter casesensitive wird bei Verwendung von ASP.NET MVC 3 bereits serverseitig beim Beschreiben der Validierungsregel festgelegt.

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("casesensitive", "false");
        rule.ValidationParameters.Add("autocorrect", "true");
            

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

        yield return rule;
    }

}

Für Validierungsregeln, welche prüfen, ob sich ein Wert innerhalb eines bestimmten Wertebereichs befindet, kann die Methode addMinMax verwendet werden. Diese Methode erwartet den Namen der HTML5-Validierungsregel sowie die Namen von drei jQuery-Validierungsregeln, wobei eine nur auf die untere Schranke, eine nur auf die obere Schranke oder die letzte sowohl auf die untere als auch auf die obere Schranke prüft.

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


        var min = parseInt(minmax[0]);
        var max = parseInt(minmax[1]);

        if (value < min || value > max) return false;
        return true;
    });

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


        alert(min);
        if (value < min) return false;
        return true;
    });

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

        if (value > max) return false;
        return true;
    });

    $.validator.unobtrusive.adapters.addMinMax("percentageminmax", "percentagemin", "percentagemax", "percentageminmax");

Das nachfolgende Listing zeigt ergänzend zum letzten die dazugehörige Server-seitige Implementierung von IClientValidatable. Hier werden auch die Parameter, welche die untere sowie obere Schranke darstellen, definiert. Standardmäßig werden diese als min und max bezeichnet.

public class PercentageMinMaxValidationAttribute : ValidationAttribute, IClientValidatable
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        // Serverseitige Validierung ist für dieses Beispiel nicht relevant... 
        return ValidationResult.Success;
    }

    // Client-seitige Validierung
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = "Wert befindet sich ausserhalb des Gültigkeitsbereichs",
            ValidationType = "percentageminmax"
        };
            
        rule.ValidationParameters.Add("min", "0");
        rule.ValidationParameters.Add("max", "100");

        yield return rule;
    }

}

 

Schulung und Beratung

Angular 2

Datenbindung, Formulare, Validierung, Routing, HTTP, Komponenten, ...

Details

Migration auf Angular 2

Bestehende Projekte auf Angular 2 migrieren, ngUpgrade, ...

Details

Progressive Web-Apps mit Angular 2

InHouse-Schulung und/oder Beratung maßgeschneidert für Ihre Lernziele

Details

Architektur-Workshop

Interaktiver Prototyp-Workshop für Ihre Anwendung

Details

Entity Framework (EF)

Datenzugriff mit Entity Framework, Mapping-Szenarien, CRUD, Transaktionen, Migrations, Stored Procedures, Vererbung, Neuerungen in Version 7

Details

Angular 2: Deep Dive

Erweiterte Aspekte von Angular 2

Details

ASP.NET WebAPI

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Web APIs mit ASP.NET MVC 6

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Moderne Security-Szenarien für Web APIs

OAuth 2, OpenId Connect, JWT, Spielarten und Flows, ...

Details

Weitere Schulungen ...