¿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 (10)

  • 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
  • collana con pendente Responder

    Pete, is Not Richard one of your former clients that was invited to retire?

    Tuesday, December 8, 2015 8:01 AM
  • Messer Responder

    There is definately a great deal to find out about this subject. I really like all the points you've made.

    Monday, March 12, 2018 8:42 AM
  • Lay Responder

    You have made some good points there. I looked on the internet to find out more about the issue and found most individuals will go along with your views on this website.

    Saturday, April 7, 2018 12:54 AM
  • Towle Responder

    Wow E?te blog parece exatamente ?omo meu velho! É ?m totalmente diferentes tópico mas tem praticamente ? mesmo layout e design. Maravilhosa ?as cores!

    Wednesday, April 18, 2018 4:48 PM
  • Stern Responder

    Hi to all, the contents existing at this site are in fact awesome for people knowledge, well, keep up the good work fellows.

    Sunday, April 22, 2018 3:32 PM
  • Fielding Responder

    Good site you have here.. It's hard to find high quality writing like yours these days. I seriously appreciate individuals like you! Take care!!

    Thursday, April 26, 2018 1:35 PM
  • Tovar Responder

    I have learn some good stuff here. Definitely worth bookmarking for revisiting. I wonder how so much effort you set to make one of these excellent informative website.

    Friday, May 18, 2018 12:15 AM
  • Novaes Responder

    Seu fotos olha excelente !!!

    Sunday, May 20, 2018 1:38 AM

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