Utilisation de TextBoxWatermark avec des contrôles Validation (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle TextBoxWatermark dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela peut entrer en conflit avec ASP.NET contrôles de validation sur la même page, mais ces problèmes peuvent être résolus.

Vue d’ensemble

Le TextBoxWatermark contrôle dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela peut entrer en conflit avec ASP.NET contrôles de validation sur la même page, mais ces problèmes peuvent être résolus.

Étapes

La configuration de base de l’exemple est la suivante : un TextBox contrôle est en filigrane à l’aide d’un TextBoxWatermarkExtender contrôle. Un bouton déclenche une publication et sera ensuite utilisé pour déclencher les contrôles de validation sur la page. En outre, un ScriptManager contrôle est nécessaire pour initialiser ASP.NET AJAX :

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <asp:TextBox ID="Name" runat="server" /> <br />
 <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
 <asp:Label ID="lbl" runat="server" />
 </div>
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="Name" WatermarkText=" Your Name " />
</form>

Ajoutez maintenant un RequiredFieldValidator contrôle qui vérifie s’il y a du texte dans le champ lors de l’envoi du formulaire. La InitialValue propriété du validateur doit être définie sur la même valeur que celle utilisée dans le TextBoxWatermarkExtender contrôle : Lorsque le formulaire est envoyé, la valeur d’une zone de texte inchangée est la valeur en filigrane qu’elle contient :

<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
 Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />

Toutefois, il existe un problème avec cette approche : si le client désactive JavaScript, le champ de texte n’est pas prérempli avec le texte en filigrane. Par conséquent, ne RequiredFieldValidator déclenche pas de message d’erreur. Par conséquent, un deuxième RequiredFieldValidator contrôle est requis pour rechercher une zone de texte vide (en omettant l’attribut InitialValue ).

<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
 Text="*" Display="Dynamic" runat="server" />

Étant donné que les deux validateurs utilisent Display="Dynamic", l’utilisateur final ne peut pas distinguer de l’apparence visuelle laquelle des deux validateurs a été déclenchée. Au lieu de cela, il semble qu’il n’y ait eu qu’un seul d’entre eux.

Enfin, ajoutez du code côté serveur pour générer le texte dans le champ si aucun validateur n’a émis de message d’erreur :

<script runat="server">
 Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 lbl.Text = HttpUtility.HtmlEncode(Name.Text)
 End Sub
</script>

Le validateur se plaint de l’absence de texte dans le champ (cliquer pour afficher l’image en taille réelle)

Précédent