Usar TextBoxWatermark con los controles de validación (C#)

por Christian Wenz

Descargar PDF

El control TextBoxWatermark del kit de herramientas de control de AJAX extiende un cuadro de texto para que se muestre un texto dentro del cuadro. Cuando un usuario hace clic en el cuadro, se vacía. Si el usuario deja el cuadro sin escribir texto, vuelve a aparecer el texto rellenado previamente. Esto puede colisionar con los controles de validación de ASP.NET en la misma página, pero estos problemas pueden superarse.

Información general

El control TextBoxWatermark del kit de herramientas de control de AJAX extiende un cuadro de texto para que se muestre un texto dentro del cuadro. Cuando un usuario hace clic en el cuadro, se vacía. Si el usuario deja el cuadro sin escribir texto, vuelve a aparecer el texto rellenado previamente. Esto puede colisionar con los controles de validación de ASP.NET en la misma página, pero estos problemas pueden superarse.

Pasos

La configuración básica del ejemplo es la siguiente: un control TextBox se marca mediante un control TextBoxWatermarkExtender. Un botón desencadena una devolución (postback) y se usará más adelante para desencadenar los controles de validación en la página. Además, se requiere un control ScriptManager para inicializar AJAX para ASP.NET:

<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>

Ahora agregue un control RequiredFieldValidator que compruebe si hay texto en el campo cuando se envía el formulario. La propiedad InitialValue del validador debe establecerse en el mismo valor que se usa en el control TextBoxWatermarkExtender: cuando se envía el formulario, el valor de un cuadro de texto sin cambios es el valor de marca de agua dentro de él:

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

Sin embargo, hay un problema con este enfoque: si el cliente deshabilita JavaScript, el campo de texto no se rellena previamente con el texto de marca de agua, por lo que RequiredFieldValidator no desencadena un mensaje de error. Por lo tanto, se requiere un segundo control RequiredFieldValidator que compruebe si hay un cuadro de texto vacío (omitiendo el atributo InitialValue).

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

Dado que ambos validadores usan Display="Dynamic", el usuario final no puede distinguir por la apariencia visual cuál de los dos validadores se desencadenó; parece que solo había uno de ellos.

Por último, agregue algo de código del lado servidor para generar el texto en el campo si ningún validador emitió un mensaje de error:

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

El validador se queja de que no hay texto en el campo (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente