Utiliser le TextBoxWatermark avec les contrôles de validation

| Christian Wenz | Philippe Vialatte (Traduction) |

Le contrôle TextBoxWatermark de l'AJAX Control Toolkit étend une zone de texte, de sorte qu'un texte est affiché dans la zone. Lorsque l'utilisateur clique dans la zone de texte, elle est vidée. Si l'utilisateur quitte la zone sans saisir de texte, le texte pré-rempli réapparaît. Cela peut interferer avec les contrôles de validation d'ASP.NET sur la même page, mais ces problêmes peuvent être surmontés.
Voir une démo
Téléchargez le code de ce tutoriel

- Titre : Utiliser le TextBoxWatermark avec les contrôles de validation

- Auteurs : Christian Wenz, Philippe Vialatte (Traduction)

- Parution : 3 mai 2009

- Mise à jour : 3 mai 2009

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Étapes

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Using TextBoxWatermark With Validation Controls

Étapes

La configuration de base de l'exemple est la suivante : on affecte un filigrane à un contrôle TextBox en utilisant un contrôle TextBoxWatermarkExtender. Un bouton déclenche un postback et sera ensuite utilisé pour déclencher les contrôles de validation sur la page. En outre, un contrôle ScriptManager 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="&lt;Your Name&gt;" />
</form>

Maintenant, ajoutez un contrôle RequiredFieldValidator qui vérifie s'il y a du texte dans le champ lorsque le formulaire est soumis. The InitialValue property of the validator must be set to the same value that is used in the TextBoxWatermarkExtender control: When the form is submitted, the value of an unchanged textbox is the watermark value within it: La propriété InitialValue du validateur doit être réglée à la même valeur que celle utilisée dans le contrôle TextBoxWatermarkExtender : Lorsque le formulaire est soumis, la valeur d'une zone de texte inchangée est celle du filigrane :

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

Mais il y a un problème avec cette approche: si le client désactive JavaScript, le champ de texte n'est pas prérempli avec le texte du filigrane, donc le RequiredFieldValidator ne déclenche pas un message d'erreur. Par conséquent, un deuxième contrôle RequiredFieldValidator est nécessaire, qui va vérifier si la zone de texte est vide (en omettant l'attribut InitialValue).

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

Étant donné que les deux validateurs on l'option Display = "Dynamic", l'utilisateur final ne peut pas distinguer à partir de l'aspect visuel lequel des deux validateurs a été activé. Au lieu de cela, il semble qu'il n'y en avait qu'un seul.

Enfin, ajoutez un peu de code côté serveur pour afficher le texte dans le champ si aucun validateur n'a émis de message d'erreur:

<script runat="server">
protected void btn_Click(object sender, EventArgs e){
lbl.Text = HttpUtility.HtmlEncode(Name.Text);
}
</script>

Le validateur se plaint qu'il n'y ait pas de texte dans le champ