Bonjour à tous.

ASP.NET WebForms propose depuis longtemps un système de validation des données saisies par l’utilisateur par le server et le client !

<div class="form-group">     
   <asp:Label runat="server" CssClass="control-label" AssociatedControlID="Name" Text="Name" />     
   <asp:TextBox runat="server" ID="Name" CssClass="form-control" />     
   <asp:RequiredFieldValidator runat="server" CssClass="help-block"     
   ControlToValidate="Name" ErrorMessage="Veuillez saisir votre nom" />     
</div>

Lorsque le textbox est vide, le message d’erreur spécifié apparaît :

OK mais pour s’intégrer correctement avec Bootstrap et afficher du rouge un peu partout, il faut également définir la classe has-error au niveau de la div englobante en cas de saisie invalide.

Pour cela nous allons simplement remplacer, ou plutôt étendre, la méthode JavaScript ValidatorUpdateDisplay générée par ASP.NET WebForms :

function extendedValidatorUpdateDisplay(obj) {   
   // Appelle la méthode originale    
   if (typeof originalValidatorUpdateDisplay === "function") {    
   originalValidatorUpdateDisplay(obj);    
   }
   // Récupère l'état du control (valide ou invalide)    
   // et ajoute ou enlève la classe has-error    
   var control = document.getElementById(obj.controltovalidate);    
   if (control) {    
   var isValid = true;    
   for (var i = 0; i < control.Validators.length; i += 1) {    
   if (!control.Validators[i].isvalid) {    
   isValid = false;    
   break;    
   }    
   }
   if (isValid) {   
   $(control).closest(".form-group").removeClass("has-error");    
   } else {    
   $(control).closest(".form-group").addClass("has-error");    
   }    
   }    
}
 
// Remplace la méthode ValidatorUpdateDisplay   
var originalValidatorUpdateDisplay = window.ValidatorUpdateDisplay;    
window.ValidatorUpdateDisplay = extendedValidatorUpdateDisplay;

Et voila le travail :

Malgré son âge ASP.NET WebForms permet toujours d’utiliser les Frameworks récents sans trop de problèmes :)

Comme d’habitude le code complet de l’exemple est disponible sur GitHub.