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.