Validacion ASP.NET y jQUery.Validate

TomNET · #1 (**permalink**) 09/11/2010, 22:37

Que tal,

Estoy haciendo una pagina de registro, la cual uso jQuery Tabs, y los estoy haciendo por pasos, asi que este formulario lo divido en 4 fields, cada field tiene sus campos con su button, todo lo manejo con jquery.

El codigo que uso para validar cada Field es el siguiete:

Código PHP:

  $(document).ready(function() { 
$("#aspnetForm").validate({ 
    onsubmit: false 
  }); 
  $('.step .causesValidation').click(Validate); 
  $('.step :text').keydown(function(evt) { 
    if (evt.keyCode == 13) { 
      var $nextInput = $(this).nextAll(':input:first'); 
      if ($nextInput.is(':submit')) { 
        Validate(evt); 
      } 
      else { 
        evt.preventDefault(); 
        $nextInput.focus(); 
      } 
    } 
  }); 
}); 
 
function Validate(evt) { 
  var $group = $(this).parents('.step'); 
  var isValid = true; 
  $group.find(':input').each(function(i, item) { 
    if (!$(item).valid()) 
      isValid = false; 
  }); 
  if (!isValid) 
    evt.preventDefault(); 
}

Este funciona correctamente, mi problema empieza cuando a un button le pongo una funcion al evento onClick(), ya que no pasa la validacion y consume la funcion.

Lo que quisiera saber, es que tengo que hacer para que cuando haga la validacion si no la cumple, no vaya al evento onclick del button

Muchas gracias por la ayuda.

Saludos ¡¡¡

crassr3cords · #2 (**permalink**) 10/11/2010, 16:59

Si esta el causesValidation en true ?.. podrias tambien asignarlo a una funcion y llamarla en el evento onClientClick maso asi

onClientClick="return Funcion();"

TomNET · #3 (**permalink**) 10/11/2010, 19:18

Hola crassr3cords, gracias por la ayuda, te muestro como tengo mi codigo:

Código PHP:

  <%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery.validate.js" type="text/javascript"></script> 
    <style type="text/css"> 
        .style1 
        { 
            width: 174px; 
            text-align: right; 
        } 
        #Text1 
        { 
            width: 171px; 
        } 
        #Text2 
        { 
            width: 171px; 
        } 
        #Text3 
        { 
            width: 171px; 
        } 
        #Text4 
        { 
            width: 171px; 
        } 
        #Submit1 
        { 
            width: 74px; 
        } 
    </style> 
    <script type="text/javascript" language="javascript"> 
 
        $(document).ready(function() { 
            $("#form1").validate({ 
                rules: { 
                    <%=TextBox1.UniqueID %>: { 
                        minlength: 2, 
                        required: true 
                    }, 
                     <%=TextBox2.UniqueID %>: {                         
                        required: true, 
                        email:true 
                    } 
                }, messages: { 
                    <%=TextBox1.UniqueID %>:{  
                        required: "* Required Field *",  
                        minlength: "* Please enter atleast 2 characters *"  
                    } 
                } 
            }); 
        }); 
 
        function Bienvenidad() { 
            alert('Hola');             
        } 
     
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <table style="width: 35%;" align="center"> 
            <tr> 
                <td class="style1"> 
                    Nombre:</td> 
                <td> 
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
                </td> 
            </tr> 
            <tr> 
                <td class="style1"> 
                    &nbsp;Correo:                 </td> 
                <td> 
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
                </td> 
            </tr> 
            <tr> 
                <td class="style1"> 
                    &nbsp;Pagina:                 </td> 
                <td> 
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
                </td> 
            </tr> 
            <tr> 
                <td class="style1"> 
                    URL:</td> 
                <td> 
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> 
                </td> 
            </tr> 
            <tr> 
                <td class="style1"> 
                    &nbsp;</td> 
                <td> 
                    &nbsp;</td> 
            </tr> 
            <tr> 
                <td class="style1"> 
                    &nbsp;</td> 
                <td> 
                    <input id="Submit1" type="submit" value="submit" onclick="Bienvenidad();" causesvalidation="false" /></td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html>

De esta forma, aunque le ponga el causesvalidation=true sigue entrando a la función aunque no cumpla la validacion, creo que he intentado de todas formas y aun nada.

Que mas podrias ser ??

Muchas gracias, Saludos ¡¡¡

calvod70 · #4 (**permalink**) 23/09/2011, 18:02

Yo tenia el mismo problema los soluciones de la siguiente manera

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestValidaciones.aspx.cs" Inherits="TestValidaciones" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validaciones</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
<script src="Scripts/languages/jquery.validationEngine-es.js" type="text/javascript"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="css/redmond/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
function fn_init() {
$("#form1").validate({
rules: {
txtNombreDeUsuario: { required: true },
txtNombre: { required: true },
txtEmail: { required: true, email: true }
},
messages: {}
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(onEachRequest);
}
function onEachRequest(sender, args) {
if ($("#form1").valid() == false) {
args.set_cancel(true);
}
}

</script>
</head>
<body>
<form id="form1" runat="server" >
<div><asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="Contenido" class="Contenido">

<div id="ContenidoAreaPestañas" class="ContenidoAreaPestañas">

<div id="tabs">
<ul>
<li><a href="#tabs-1">Usuarios</a></li>
<li><a href="#tabs-2">Compañia(s)

</a></li>
</ul>

<div id="tabs-1">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td class="AreaEtiquetas">
<asp:Label ID="lblNombreDeUsuario" runat="server" Text="Nombre de usuario"></asp:Label>
<asp:Label ID="lblIdUsuario" runat="server" Text="" Visible="false"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtNombreDeUsuario" runat="server" AutoComplete="Off"
CssClass="validate[required] requerido"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AreaEtiquetas">
<asp:Label ID="lblNombre" runat="server" Text="Nombre"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtNombre" runat="server"
CssClass="validate[required] requerido"></asp:TextBox>
</td>
<td class="AreaEtiquetas">
<asp:Label ID="lblApellidoPaterno" runat="server" Text="Apellido Paterno"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtApellidoPaterno" runat="server"
CssClass="validate[required] requerido"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AreaEtiquetas">
<asp:Label ID="lblApellidoMaterno" runat="server" Text="Apellido Materno"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtApellidoMaterno" runat="server"></asp:TextBox>
</td>
<td class="AreaEtiquetas">
<asp:Label ID="lblPerfil" runat="server" Text="Perfil"></asp:Label>
</td>
<td class="AreaInputs">
<asp:DropDownList ID="ddlPerfil" runat="server" >
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="AreaEtiquetas">
<asp:Label ID="lblContrasena" runat="server" Text="Contraseña"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtContrasena" runat="server" ></asp:TextBox>
</td>
<td class="AreaEtiquetas">
<asp:Label ID="lblEmail" runat="server" CssClass="" Text="Email"></asp:Label>
</td>
<td class="AreaInputs">
<asp:TextBox ID="txtEmail" runat="server"
></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Guardar" />
<asp:Button ID="Button2" runat="server" CausesValidation="False"
onclick="Button2_Click" Text="Button" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

</div>

<div id="tabs-2">
<p>Morbi ti.</p>
</div>
</div>

</div>

</div>
</div>
</form>
<script type="text/javascript">
function pageLoad() {
fn_init();
}
</script>
</body>
</html>