Nello script precedente #1051 abbiamo visto come sia semplice, grazie alle Data Annotation, realizzare un custom attribute per esprimere una propria regola di validazione personalizzata. L'implementazione che abbiamo realizzato, però, non offre alcun supporto per la validazione lato client, con il risultato che essa possa essere effettuata solo a valle di un post della form di input.

In ASP.NET MVC 3 è possibile aggiungere tale funzionalità facendo in modo che l'attributo di validazione implementi l'interfaccia IClientValidatable e realizzando poi una semplice integrazione Javascript per jQuery Validator. Cerchiamo di capire come estendere l'esempio che abbiamo realizzato in precedenza, ossia la classe MustContainAttribute tramite la quale siamo stati in grado di forzare la presenza di caratteri speciali al'interno di una password:

[Required]
[MustContain("!£$%")]
[DataType(DataType.Password)]
public string Password { get; set; }

L'interfaccia IClientValidatable è molto semplice, e contiene un unico metodo che restituisce un insieme di metadati, tramite cui comunicare al framework client-side quali sono le funzioni javascript da utilizzare per la validazione e con quali parametri.

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
  ModelMetadata metadata, ControllerContext context)
{
  var res = new ModelClientValidationRule();

  res.ValidationType = "containschar";
  res.ErrorMessage = this.FormatErrorMessage(
    metadata.PropertyName);
  res.ValidationParameters.Add("chars", this.Chars);

  yield return res;
}

GetClientValidationRules restituisce un'istanza di ModelClientValidationRule, che contiene le seguenti informazioni:

• Il nome della funzione javascript che dovrà occuparsi di validare il dato client-side;
• Il messaggio di errore da mostrare in caso la validazione fallisca;
• Eventuali ulteriori parametri, ad esempio, nel nostro validatore, passiamo l'elenco dei caratteri che devono essere contenuti nell'input.

Dal punto di vista, invece, del codice Javascript, il primo passo è quello di realizzare una estensione di jQuery Validator contenente la nostra logica di validazione.

jQuery.validator.addMethod(
  "containschar_validation", 
  function (value, element, param) {
    for (var i = 0; i < param.length; i++) {
      if (value.indexOf(param[ i]) > -1)
        return true;
    }

    return false;
  });

Nel nostro caso, ad esempio, abbiamo aggiunto a jQuery Validator un nostro metodo personalizzato, chiamato containschar_validation, che consiste in una funzione che accetta tre parametri:

• value, che contiene il dato che deve essere validato;
• element, che fornisce un riferimento all'elemento del DOM oggetto della validazione;
• param, tramite cui fornire alla funzione ulteriori parametri; la nostra particolare implementazione utilizza questo argomento per passare al validatore l'elenco dei caratteri da verificare.

La logica di containschar_validation, per il resto, è piuttosto semplice, visto che si limita a iterare tra tutti i caratteri forniti in ingresso, valutandone la presenza all'interno di value e restituendo true o false a seconda che quest'ultimo sia ritenuto valido o meno.

Per integrare questa funzione all'interno del framework di unobtrusive validation utilizzato da ASP.NET MVC 3, c'è bisogno di un ulteriore elemento, un adapter, che ha il compito di recuperare i metadati emessi dal nostro MustContainAttribute e tradurli in input per containschar_validation.

jQuery.validator.unobtrusive.adapters.add(
  "containschar", 
  ["chars"], 
  function (options) {
    options.rules["containschar_validation"] = options.params.chars;
    options.messages["containschar_validation"] = options.message;
  });

Ogni adapter è identificato da un nome, containschar nel nostro caso, unitamente a un array di stringhe, nella fattispecie la sola chars, contenente i nomi dei parametri addizionali che vogliamo gestire. Entrambi questi dati devono corrispondere a quelli che abbiamo impostato nel metodo GetClientValidationRule implementato all'interno dell'attributo di validazione.

L'ultimo parametro è invece una funzione, la cui implementazione consente di assegnare il valore del parametro chars e il messaggio di errore (automaticamente valorizzati in base ai dati provenienti dal server) al validatore containschar_validation che abbiamo definito in precedenza.