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

1
Administrador
10/7/2013 9:51:14 AM

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


Comentarios


Felipe Guz. 1/3/2015 5:33:33 PM    
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.

Envía tu comentario


Nombre (requerido) 


Email (requerido)   


Website
Comentario (requerido) 

AYUDA
Estimado usuario: estamos recaudando fondos para mantener DeveloperJI, con la finalidad de subsanar los gastos de servidores, electricidad, alquiler, software, personal e iniciativas varias. Si DeveloperJI te resulta útil, dedica un instante a que siga funcionando otro año y apóyanos con un donativo.
SUSCRIBETE

   


CATEGORÍA
POPULARES
TAGS
POSTS RECIENTES
REDES SOCIALES