¿Cómo validar campos en ASP.NET con jQuery?

¿Cómo validar campos en ASP.NET con jQuery?

En este artículo veremos cómo llevar a cabo la validación de formularios con jQuery en ASP.NET.

Los diversos campos de formulario como TextBox, DropDownList, etc  y el tipo de validaciones involucrados que serían necesarios como el correo electrónico, la confirmación de contraseña, el tamaño mínimo y máximo, número de teléfono, el número de teléfono móvil, formato de fecha dd/mm/aaaa.

El HTML se compone de una página ASP.Net con varios campos de formulario, como TextBox, DropDownLists, usted se dará cuenta de que hay algunas CSS aplicadas a los controles TextBox y DropDownList, éstos se agregan para la validación de jQuery. Al final del artículo encontrara el link de descarga del ejemplo.

Ejemplo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="ValidacionjQuery_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            margin-top: 100px;
            font-family: Arial;
            font-size: 10pt;
        }
        input, select
        {
            width: 150px;
        }
    </style>
     <link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
        charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").validationEngine('attach', { promptPosition: "topRight" });
        });
    </script>
    <script type="text/javascript">
        function DateFormat(field, rules, i, options) {
            var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
            if (!regex.test(field.val())) {
                return "Please enter date in dd/MM/yyyy format."
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
            </td>
            <td>
                Please fill the following Form
            </td>
        </tr>
        
        <tr>
            <td>
                Name:
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" />
            </td>
        </tr>
        <tr>
            <td>
                Email:
            </td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
            </td>
        </tr>
       
        <tr>
            <td>
                City:
            </td>
            <td>
                <asp:DropDownList ID="ddlCities" runat="server" CssClass="validate[required]">
                    <asp:ListItem Text="Please Select" Value="" />
                    <asp:ListItem Text="Mumbai" Value="1" />
                    <asp:ListItem Text="Delhi" Value="2" />
                    <asp:ListItem Text="Kolkatta" Value="3" />
                    <asp:ListItem Text="Chennai" Value="4" />
                </asp:DropDownList>
            </td>
        </tr>
        
        <tr>
            <td>
                Password:
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
            </td>
        </tr>
       
        <tr>
            <td>
                Confirm Password:
            </td>
            <td>
                <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate[required,equals[txtPassword]]" />
            </td>
        </tr>
        
        <tr>
            <td>
                Mobile Phone Number:
            </td>
            <td>
                <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom[integer],maxSize[10],minSize[10]]" />
            </td>
        </tr>
       
        <tr>
            <td>
                Birth Date (dd/MM/yyyy):
            </td>
            <td>
                <asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]] " />
            </td>
        </tr>
       
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="Button1" Text="Submit" runat="server" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Puede descargar el ejemplo aquí.

Compartir

Comentarios (2)

  • Felipe Guz. Responder

    Hola Gracias por el ejemplo. pero tengo un problema al dar click en el boton y hay errores en los campos no logro evitar el submit al servidor en tu ejemplo no indicar en el boton el metodo de servidor por lo que el nonca haces submit mi voton es como puedo evitar que haga el submit al servidor si hay errores en los campos.

    Saturday, January 3, 2015 5:33 PM
    • Edgar Andrade Responder

      Felipe en este link puedes ver otro ejemplo más a detalle e incluso puedes prevenir varios envios. http://developerji.com/Post/-Como-especificar-grupos-de-validacion-con-jQuery-y-ASP-NET-/4151 Saludos

      2/3/2015 5:57:42 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com