none
Validar Form con JQuery que hereda de un Master Page RRS feed

  • Pregunta

  • Buen día, desde el día de ayer estuve intentando validar un formulario con JQuery utilizando un ejemplo que encontré el siguiente blog Validación JQuery Textbox. Todo funciona bien siempre y cuando el Webform no here de un Master Page, ya intente de muchas formas hacerlo funcionar, pero aún no he tenido éxito. No sé si quizás haya hecho algo mal por ello les dejo en comentario el código de la Master Page y del webform que hereda del Master

    Código Master Page

    <%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="TOL.SiteMaster" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    
        <link rel="stylesheet" href="~/Styles/bootstrap.min.css"/>
        <link rel="stylesheet" href="~/Styles/main.css"/>
        <link rel="stylesheet" href="~/Styles/bootstrap-select.css"/>
        <link rel="stylesheet" href="~/Styles/ladda-themeless.min.css"/>
        <script src="../Scripts/jquery-1.11.1.min.js"></script>
    	<script src="../Scripts/bootstrap.min.js"></script>
        <script src="../Scripts/bootstrap-select.js"></script>
    
        <script src="../Scripts/ladda.min.js"></script>
        <script src="../Scripts/spin.min.js"></script>
    
        <script src="../Scripts/jquery-1.7.1.min.js"></script>
        <script src="../Scripts/jquery.validate.js"></script>
    
    </head>
    <body>
        <div class="container">
            <div class="row" style="padding: 30px 0 30px 0;">
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
                    
                </div>
            </div>
            <div id="banner" class="row">
                <div class="col-lg-10 col-md-10 col-sm-9 col-xs-9"><p style="font-size: 22px;"><b>Test Online</b></p></div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-3 text-right">
                    <asp:ContentPlaceHolder ID="cphBanner" runat="server"></asp:ContentPlaceHolder>
                </div>
            </div>
            <div class="row">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
                </asp:ContentPlaceHolder>
            </div>
            <div class="row blue">.</div>
            <div class="row">
                <div id="footer" class="col-lg-12" style="padding: 10px 0 10px 0;">
                    Copyright © 2015 Euroidiomas - All Rights Reserved
                </div>
            </div>
            
        </div>
    </body>
    </html>
    

    Código del Webform que hereda del Master

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="frmLogin.aspx.vb" Inherits="TOL.frmLogin" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
        <script src="../Scripts/ladda.min.js"></script>
        <script src="../Scripts/spin.min.js"></script>
        <script src="../Scripts/jquery-1.7.1.min.js"></script>
        <script src="../Scripts/jquery.validate.js"></script>
        <!--Validaciones-->
        <script type="text/javascript">
            $(document).ready(function () {
                
                $("#<%=frmLogin.ClientID%>").validate({
                    rules: {
    
                        'txtcorreo': { required: true, email: true }
                    },
                    messages: {
    
                        'txtcorreo': { required: 'Ingrese un correo electrónico', email: 'Ingrese un correo valido. Ejemplo: micorreo@gmail.com' }
                    },
    
    
                });
            });
     </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphBanner" runat="server">
        <div style="vertical-align: middle;" class="vcenter"></div>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <form id="frmLogin" class="form-horizontal" role="form" runat="server">
            <asp:ScriptManager ID="SManager" runat="server"></asp:ScriptManager>
            <div class="col-lg-12 col-md-12 col-sm-12 text-center" style="padding: 20px 20px 20px 20px;">
                Ingresa tu correo electrónico y tu contraseña. <asp:HyperLink ID="RegisterHyperLink" runat="server" NavigateUrl="~/Pages/register.aspx" EnableViewState="false">Regístrate</asp:HyperLink> si no lo has hecho aún.
                <br />
                <asp:Label ID="lblMensaje" runat="server"></asp:Label>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-10 col-xs-12 col-lg-offset-4 col-md-offset-3 col-sm-offset-2 col-xs-offset-1" style="padding: 20px 20px 20px 20px;">
    
                <div class="form-group">
                    <div class="col-lg-2 col-md-3 col-sm-2 col-xs-4 text-right">      
                        <i class="fa fa-info-circle fa-lg" style="color: #9ccb00;"></i>        
                    </div>                                                 
                    <div class="col-lg-6 col-md-7 col-sm-5 col-xs-8 text-right">      
                        <asp:LinkButton ID="lnkContraseña" CssClass="btn-link" runat="server" Font-Size="Smaller" Text="Olvide mi Contraseña"></asp:LinkButton>  
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-md-3 col-sm-2 col-xs-4 control-label">Email:</label>   
                    <div class="col-lg-6 col-md-7 col-sm-5 col-xs-8">      
                        <asp:TextBox ID="txtcorreo" runat="server" CssClass="form-control" placeholder="Email"></asp:TextBox> 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-md-3 col-sm-2 col-xs-4 control-label">Password:</label>                                                  
                    <div class="col-lg-6 col-md-7 col-sm-5 col-xs-8">      
                        <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" placeholder="Password"></asp:TextBox> 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-md-3 col-sm-2 col-xs-4 control-label"></label>                                                  
                    <div class="col-lg-6 col-md-7 col-sm-5 col-xs-8" style="text-align:right">      
                        <asp:LinkButton ID="lnkIngresar" CssClass="btn btn-primary ladda-button" runat="server" data-style="expand-left" Width="120px">
                            <span class="ladda-label">Ingresar</span>
                        </asp:LinkButton>
                    </div>
                </div>
            </div>  
            
        </form>
    
        <script type="text/javascript">
            function pageLoad() {
                $(function () {
                    Ladda.bind('.ladda-button', { timeout: 2000 });
                    Ladda.bind('input[type=submit]');
                });
            }
        </script>
    </asp:Content>
    

    las librerías del JQuery que valida las textbox se encuentra en el blog listas para descargarse. Desde ya muchas gracias. Saludos


    Si se solucionó tu consulta no olvides marcar la respuesta de esta forma mantendremos el orden en el Foro.

    José Carlos Barba Gutierrez
    Lima - Perú
    Saludos

    viernes, 19 de junio de 2015 13:31

Respuestas

  • hola

    lo que puedo marcar es que no funciona el ~/ en el tag <link>

    y quizas los <script> que apuntan con ../ no resuelva correctamente cuando usas materpage

    segur te suceda lo que menciono aqui

    [ASP.NET] Master Page - Referencia relativa a elemnto de una pagina

    como veras debe resolver relativo a la pagina que implementa la master, por eos quizas no cargue los .js

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta José Barba viernes, 19 de junio de 2015 16:36
    viernes, 19 de junio de 2015 14:29
  • Por un lado, si incluyes la referencia los archivos de JavaScript en la Master (jQuery, jquery-validate, etc.) no hace falta que los incluyas en la página. Estás incluyendo dos veces el mismo archivo, dependiendo de cual sea puede provocar errores.

    Por otro lado estás incluyendo dos versiones distintas de jQuery. En la Master tienes referenciadas las versiones 1.11.1 y 1.7.1, y en la página tienes otra referencia a la 1.7.1. Deberías dejar únicamente una, preferiblemente la más reciente.

    Si con esto no se soluciona, abre el código fuente HTML generado desde el navegador. Es probable que, al estar dentro de un PlaceHolder, el ID de cliente del control txtcorreo no sea "txtcorreo".
    Podrías cambiar las referencias al control desde JavaScript, por ejemplo:

     '<%=txtcorreo.ClientID%>': { required: true, email: true }
    
    en lugar de 
    
     'txtcorreo': { required: true, email: true }
    
    

    • Marcado como respuesta José Barba viernes, 19 de junio de 2015 16:36
    viernes, 19 de junio de 2015 14:30

Todas las respuestas

  • hola

    lo que puedo marcar es que no funciona el ~/ en el tag <link>

    y quizas los <script> que apuntan con ../ no resuelva correctamente cuando usas materpage

    segur te suceda lo que menciono aqui

    [ASP.NET] Master Page - Referencia relativa a elemnto de una pagina

    como veras debe resolver relativo a la pagina que implementa la master, por eos quizas no cargue los .js

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta José Barba viernes, 19 de junio de 2015 16:36
    viernes, 19 de junio de 2015 14:29
  • Por un lado, si incluyes la referencia los archivos de JavaScript en la Master (jQuery, jquery-validate, etc.) no hace falta que los incluyas en la página. Estás incluyendo dos veces el mismo archivo, dependiendo de cual sea puede provocar errores.

    Por otro lado estás incluyendo dos versiones distintas de jQuery. En la Master tienes referenciadas las versiones 1.11.1 y 1.7.1, y en la página tienes otra referencia a la 1.7.1. Deberías dejar únicamente una, preferiblemente la más reciente.

    Si con esto no se soluciona, abre el código fuente HTML generado desde el navegador. Es probable que, al estar dentro de un PlaceHolder, el ID de cliente del control txtcorreo no sea "txtcorreo".
    Podrías cambiar las referencias al control desde JavaScript, por ejemplo:

     '<%=txtcorreo.ClientID%>': { required: true, email: true }
    
    en lugar de 
    
     'txtcorreo': { required: true, email: true }
    
    

    • Marcado como respuesta José Barba viernes, 19 de junio de 2015 16:36
    viernes, 19 de junio de 2015 14:30
  • Buenas tardes José,

    El problema está en que la libreria obtiene el element y compara el nombre de input con el que ingresas en las rules/messages, como este es un ASP:TextBox te modifica el nombre de id/name del mismo y la libreria no encuentra regla/message asociado. Puedes arreglar esto modificando el constructor de la libreria

    // Linea 178
    // constructor for validator
    $.validator = function (options, form) {
        var aspOptions = options;
        $.each(aspOptions.rules, function (key, val) {
            var k = $('input[id$=' + key + ']').attr('name');
            delete  aspOptions.rules[key];
            aspOptions.rules[k] = val;
        });
        $.each(aspOptions.messages, function (key, val) {
            var k = $('input[id$=' + key + ']').attr('name');
            delete aspOptions.messages[key];
            aspOptions.messages[k] = val;
        });
        this.settings = $.extend(true, {}, $.validator.defaults, aspOptions);
    	this.currentForm = form;
    	this.init();
    };


    Saludos.-

    viernes, 19 de junio de 2015 14:50
  • si usas asp.net 4 recomendaria le des una mirada a

    Control.ClientIDMode Property

     ASP.NET 4.0 Client ID Feature

    de esta forma tu controlas como se define el id de los controles y el uso de una master no te cambia el id que se renderiza de la pagina

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    viernes, 19 de junio de 2015 16:22