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

Estrada Web Group
Administrador
¿Cómo validar campos en ASP.NET con jQuery?

validacion asp.net y jquery ajax

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 artículo:

Más artículos geniales

Aprende a integrar pagos con PayPal en ASP.NET Core: Crear cuentas de Sandbox en PayPal

Aprende a integrar pagos con PayPal en ASP.NET Core: Crear cuentas de Sandbox en PayPal

En este artículo te enseñare a crear una cuenta Sandbox de PayPal para recibir pagos en tu página web desarrollada con ASP.NET Core y creare una serie de artículos donde te mostrare diferentes formas de integrar PayPal en tu sitio web desarrollado con ASP.NET Core para recibir pagos.

Ver artículo completo
Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

En este artículo te enseñare a configurar API REST de PayPal para consumirlo en ASP.NET para recibir pagos en tu página web desarrollada con ASP.NET Core

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;