Validation personnalisée non intrusive dans ASP.NET MVC

La validation des propriétés de modèle dans ASP.NET MVC est gérée à la fois côté serveur et client. La validation côté client utilise jQuery Validate. Les éléments nécessitant une validation comportent des attributs HTML avec le préfixe data-val-, tels que :

<input type="text" name="Nom" id="Nom" data-val-required="Le champ Nom est obligatoire." data-val="true"/>

L'attribut data-val="true" indique que la valeur saisie par l'utilisateur doit être validée. Les autres attributs commençant par data-val- définissent les règles de valiadtion et leurs paramètres associés. Par exemple, data-val-required signifie qu'un champ ne peut pas être vide, et data-val-number signifie que le champ ne doit contenir que des chiffres. Ces noms de règles correspondent aux règles par défaut de jQuery Validate, qui incluent :

  1. required : champ obligatoire
  2. equalTo:"#champ" : la valeur doit correspondre à celle du champ spécifié
  3. email : format d'adresse e-mail valide
  4. url : format d'URL valide
  5. date : format de date valide
  6. creditcard : numéro de carte de crédit valide

ASP.NET MVC encapsule ces règles en utilisant le fichier jquery.validate.unobtrusive.js, qui interprète les attributs data-val-.

IClientValidatable

L'interface IClientValidatable permet de retourner des attributs personnalisés avec des attributs data-val-. Elle retuorne des objets de type ModelClientValidationRule.

public class ModelClientValidationRule
{
    // Message d'erreur à afficher en cas de non-validation
    public string ErrorMessage { get; set; }

    // Paramètres de validation
    public IDictionary<string, object> ValidationParameters { get; }

    // Type de validation personnalisé
    public string ValidationType { get; set; }
}

Par exemple, voici une règle de validation personnalisée qui vérifie qu'une valeur ne correspond pas à une valeur spécifique :

public class NotEqualAttribute : ValidationAttribute, IClientValidatable
{
    public NotEqualAttribute(string notEqualValue)
    {
        this.NotEqualValue = notEqualValue;
    }

    public override string FormatErrorMessage(string name)
    {
        return $"{name} ne peut pas être égal à {NotEqualValue}";
    }

    public string NotEqualValue { get; private set; }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var validationRule = new ModelClientValidationRule
        {
            ErrorMessage = FormatErrorMessage(metadata.DisplayName),
            ValidationType = "not_equal",
        };
        validationRule.ValidationParameters.Add("value", NotEqualValue);

        yield return validationRule;
    }
}

Tous les attributs de validasion doivent hériter de la classe ValidationAttribute et peuvent redéfinir la méthode IsValid pour la validation côté serveur.

public class Personne
{
    [DisplayName("Nom")]
    [Required]
    [NotEqual("abcd")]
    public string Nom { get; set; }
}

Le code HTML généré sur la page sera :

<input type="text" value="" name="Nom" id="Nom" data-val-required="Le champ Nom est obligatoire."
 data-val-not-equal-value="abcd" data-val-not-equal="Nom ne peut pas être égal à abcd" data-val="true" class="text-box single-line">

Inscription de la validation côté client

Pour effectuer la validation côté client, ajoutez le code JavaScript suivant :

$.validator.addMethod('not_equal', function (value, element, params) {
    return value !== params['value'];
});

$.validator.unobtrusive.adapters.add('not_equal', ['value'], function (options) {
    options.rules['not_equal'] = {
        value: options.params.value
    };
    options.messages['not_equal'] = options.message;
});

Ce code ajoute une nouvelle méthode de validation et configure les règles et les messages d'erreur.

Étiquettes: ASP.NET MVC jQuery Validate unobtrusive validation IClientValidatable ModelClientValidationRule

Publié le 18 octobre à 06h10