jQuery Validation permet de vérifier la validité des entrées utilisateurs côté client (dans le navigateur). Cela a deux objectifs :

• Eviter les aller-retours inutiles entre le client et le serveur lorsque les données sont invalides
• Améliorer l’expérience utilisateur en offrant un retour visuel immédiat lorsque l’utilisateur saisie des données

jQuery Validation Unobstrusive permet de créer des règles de validation automatiquement en se basant sur les attributs “data-val-*” :

<input class="form-control" 
   data-val="true" 
   data-val-length="The field Name must be a string with a maximum length of 256." 
   data-val-length-max="256" 
   data-val-required="The Name field is required.">

Ces attributs sont générés automatiquement par ASP MVC en se basant sur les data annotations (RequiredAttribute, LengthAttribute, EmailAttribute, etc. ). Le HTML ci-dessus a été généré avec le code suivant :

[System.ComponentModel.DataAnnotations.StringLengthAttribute(256)]    
[System.ComponentModel.DataAnnotations.RequiredAttribute()]     
public string Name { get;  set ; }

<div class="form-group">    
   @Html.LabelForBootstrap(model => model.Name)     
   @Html.EditorForBootstrap(model => model.Name)     
   @Html.ValidationMessageForBootstrap(model => model.Name)     
</div>

Lorsque l’utilisateur “oublie” de saisir une valeur la règle de validation invalide le champ et affiche un message d’erreur :

C’est bien mais ce n’est pas très esthétique. Bootstrap permet de mettre en rouge les champs contenant des données invalides. Pour cela il faut ajouter la classe “has-error” au conteneur “form-group”. De plus il est possible d’ajouter un glyph (une croix pour une erreur) afin de rendre l’erreur plus visuelle :

<div class="form-group has-error has-feedback">  
   <label class="control-label" for="Name">Name</label>  
   <input class="form-controlinput-validation-error" data-val="true">
   <span class="glyphicon glyphicon-remove form-control-feedback"></span><span class="glyphicon glyphicon-remove form-control-feedback"></span>  
   <span class="help-block field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true"><span id="Name-error" class="">The Name field is required.</span></span>  
</div>

jQuery Validation permet de modifier le code exécuté par défaut lors de la validation d’un champs. Pour cela il faut utiliser la méthode $. validator. setDefaults :

$.validator.setDefaults({ 
   ignore: [':hidden'], /* Ignore les champs cachés lors de la validation */ 
   errorClass: "input-validation-error",
   // On Validation Error 
   highlight: function (element, errorClass) {  
   var $element = $(element); // Récupère l’élément valider 
   $element.addClass(errorClass);
   // Ajoute les classes au form-group conteneur 
   $element.closest('.form-group').addClass('has-error has-feedback'); 
   // Ajoute le glyph (croix) à droite de l’input 
   $('<span class="glyphicon glyphicon-remove form-control-feedback"></span>').insertAfter($element);  
   },
   // On Validation Success 
   unhighlight: function (element, errorClass) { 
   var $element = $(element); 
   $element.removeClass(errorClass); 
   $element.closest('.form-group').removeClass('has-error has-feedback');
   // Supprime le glyph s’il existe 
   var next = $element.next(); 
   if (next && next.hasClass('form-control-feedback')) {  
   next.remove(); 
   } 
   } 
});

Et voila, en quelques lignes de JavaScript il est possible d’adapter jQuery Validation à Bootstrap. Pour aller plus loin on pourrait également ajouter la classe has-success et le glyph associé lorsque le champ est valide…