Validar DropDownList con RequiredFieldValidator y CustomValidator

Hola amigos de Geeks, Revisando la entrada de Marc Rubiño referente a Como Validar un ListBox (CustomoValidator), me acorde de lo tedioso que es la parte de validación y cuando estaba empezando lo que era validar un DropDownList.

Mostrare tres ejemplos de como validar este control de forma sencilla.

  1. Validar DropDownList con datos manuales

En este caso, vamos a validar con datos ingresados manualmente.

   1: <asp:DropDownList id="fecha" runat="server">
   2:             <asp:ListItem>--------</asp:ListItem>
   3:             <asp:ListItem >01/08</asp:ListItem>
   4:             <asp:ListItem >02/08</asp:ListItem>
   5:             <asp:ListItem >03/08</asp:ListItem>
   6:             <asp:ListItem >04/08</asp:ListItem>
   7:             <asp:ListItem >05/08</asp:ListItem>
   8:             <asp:ListItem >06/08</asp:ListItem>
   9:             <asp:ListItem >07/08</asp:ListItem>
  10:             <asp:ListItem >08/08</asp:ListItem>
  11:             <asp:ListItem >09/08</asp:ListItem>
  12:             <asp:ListItem >10/08</asp:ListItem>
  13:             <asp:ListItem >11/08</asp:ListItem>
  14:             <asp:ListItem >12/08</asp:ListItem>
  15: </asp:DropDownList>

Y ahora con el RequiredFieldValidator hacemos lo siguiente.

   1: <asp:RequiredFieldValidator id="rfvFecha" 
   2: ControlToValidate="fecha" ErrorMessage="Seleccione Fecha. 
   3: " Display="Static" InitialValue="--------" runat="server"/>

Y la respectiva imagen.

validar1 

2. Validar DropDownList con RequiredFieldValidator

En este ejemplo, vamos a validar con un RequiredFieldValidator pero en este caso será con una fuente de datos.

   1: <asp:DropDownList ID="DropDownList1" runat="server" 
   2:         DataSourceID="SqlDataSource1" DataTextField="ProductName" 
   3:         DataValueField="ProductName" AppendDataBoundItems="True">
   4:             <asp:ListItem>Seleccione un producto</asp:ListItem>
   5: </asp:DropDownList>
   6:     <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
   7:         ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
   8:         SelectCommand="SELECT [ProductName] FROM [Alphabetical list of products]">
   9:     </asp:SqlDataSource>

El RequiredFieldValidator quedaría de la siguiente forma.

   1: <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
   2:         ErrorMessage="Seleccione un producto." 
   3: ControlToValidate="DropDownList1" InitialValue="Seleccione un producto"/>

La respectiva imagen.

validar2

3. Validar DropDownList con CustomValidator y JavaScript

En nuestro ejemplo final, validaremos con un CustomValidator y JavaScript.

   1: <asp:DropDownList ID="DropDownList1" runat="server" 
   2:         DataSourceID="SqlDataSource1" DataTextField="ProductName" 
   3:         DataValueField="ProductName" AppendDataBoundItems="True">
   4: </asp:DropDownList>
   5: <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
   6:         ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
   7:         SelectCommand="SELECT [ProductName] FROM [Alphabetical list of products]">
   8: </asp:SqlDataSource>

Algo diferente que tiene de nuestro anterior ejemplo es que no agregamos el campo donde dice “Seleccione el producto” en el diseñador, pero igual tiene la propiedad AppendDataBoundItems=”True”, lo que haremos es hacerlo mediante código.

La función JavaScript seria la siguiente, como observaran nada complicado.

   1: <script type="text/javascript">
   2:     function ValidaDDL(source, arguments) {
   3:         if (arguments.Value < 1) {
   4:             arguments.IsValid = false;
   5:         }
   6:         else {
   7:             arguments.IsValid = true;
   8:         }
   9:     } 
  10: </script>

Ahora el CustomValidator

   1: <asp:CustomValidator ID="CustomValidator1" runat="server" 
   2:      ClientValidationFunction="ValidaDDL" ControlToValidate="DropDownList1" 
   3:      ErrorMessage="Selecione un produrcto." ValidateEmptyText="True">
   4: </asp:CustomValidator>

Para terminar la línea de código pendiente.

   1: DropDownList1.Items.Insert(0, new ListItem("Seleccione un producto", "0"));

La imagen de muestra.

validar3

Para tener en cuenta.

  • Si usas el RequiredFieldValidator y agregas un nuevo campo, para que no aparezca un dato de una seleccionado, tener en cuenta que el valor de la propiedad InitialValue=”” Debe ser igual al texto que colocaste en ese campo agregado.
  • Con CustomValidator puedes usar funciones JavaScript y hacer el mismo trabajo que con RequiredFieldValidator, pero puedes enriquecer el JavaScript y darle mas funcionalidad, ya es cuestión de gustos.

Bueno espero que les sea de utilidad.

Romny

Publicado por

Romny Duarte

Ingeniero de sistemas con experiencia en desarrollo web y móvil, geek, amante de la lectura y de la tecnología.

5 comentarios en “Validar DropDownList con RequiredFieldValidator y CustomValidator”

  1. Espero que a nadie le pase pero cometi un error en la siguiente linea:

    DropDownList1.Items.Insert(0, “Seleccione un producto”)

    y por este motivo el Custom Validator no funcionaba ni mostraba ningun mensaje cuando no se elegia alguna opción. Lo correcto es lo que posteaste

    DropDownList1.Items.Insert(0, new ListItem(“Seleccione un producto”, “0”));

    Gracias!!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *