Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

novato_PHP

Jquery Validate X Master Page

Por , em .NET

Recommended Posts

novato_PHP    0

novato_PHP
Postado

Prezados colegas,

 

 

Em meus estudos de .net, surgiu uma dúvida que não estou conseguindo resolver. Possuo uma página com um componente ContentPlaceHolder que herda alguns componentes visuais de uma master page, mas neste página possuo um form e nele preciso validar com jquery validate + maskedinput.

O maskedinput consegui fazer funcionar tranquilamente, verificando como o asp.net renderiza o textbox. Mas o validate não funciona, testei o codigo fora de uma master page e funciona normalmente... O que pode ser? Visto que ele não muda o id do form quando renderiza ele.. Pelo menos no codigo fonte que é gerado no browser nao aparece.. vou postar alguns codigos para entenderem melhor....

 

Master page

 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="layout.master.cs" Inherits="COPEP.layout" %>
<!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.1.min.js" type="text/javascript"></script>    
<script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/util.validate.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#003366;
}
.edit {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border: 1px solid #0080C0;
background-color:#D9F2FB;
}
.desabilitado {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border: none;
}
fieldset {
  border: 1px solid #003366;
  padding: 10px;
  margin: 0 0 1em;
  width:500px;
  color:#003366;
  }

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(imagens/backgif.gif);
background-repeat: repeat;

}
.alertmsg {
   color:#FF0000;
}
.style2 {
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   color: #003366;
   font-weight: bold; 
}
#conteudo
{
   width:700px;
   margin:auto;    
}
#direita
{
 width:320px;
 border: 1px  solid;
 float:right;

}
#esquerda
{
   width:320px;
   float:left;
}

</style>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>
<body> 
... código html ...
       <asp:ContentPlaceHolder ID="paginas" runat="server">

       </asp:ContentPlaceHolder>
... continuação do código html ...
  </div>   
</body>
</html>

 

 

pagina que herda a parte visual da master page 

<%@ Page Title="" Language="C#" MasterPageFile="~/layout.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="COPEP.index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language="javascript" type="text/javascript">
   // validacao com jquery
   $(document).ready(function () {
       $("#paginas_txtCPF").mask("999.999.999-99");
       var validator = $("#formulario").validate({
           rules: {
                 paginas_txtCPF: { required: true, cpf: "both" }
           }
       ,
           messages: {
                          paginas_txtCPF: { required: "Informe seu CPF",
                   cpf: "cpf inválido!"
               }
           },
           wrapper: 'li',
           errorLabelContainer: $("#formulario div.alertmsg")

       });

   });   
</script>   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="paginas" runat="server">
<form id="formulario" runat="server">
<div id="conteudo" style="height: 423px">
<div id="esquerda" style="height: 193px; width: 320px">
<fieldset><legend>Digite seu CPF abaixo</legend>
         <asp:Label ID="Label2" runat="server" Text="CPF"></asp:Label>
       .:<asp:TextBox ID="txtCPF" runat="server" Width="178px" CssClass="input" 
           Height="18px" MaxLength="14"></asp:TextBox>
       <br />
       <br />
       <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
           RepeatDirection="Horizontal">
           <asp:ListItem Value="1">Realizar inscrição</asp:ListItem>
           <asp:ListItem Value="2">2ª via de Boleto</asp:ListItem>
       </asp:RadioButtonList>
       <br />
       <asp:Button ID="btnenviar" runat="server" CssClass="botao" Text="Pesquisar" 
           PostBackUrl="~/sem.aspx" />
       <div class="alertmsg"></div>
</fieldset>
</div>
</div>  
</form>
</asp:Content>

 

Código gerado no browser



<!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><title></title>

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>    

<script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>

<script src="js/jquery.validate.min.js" type="text/javascript"></script>

<script src="js/util.validate.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/css.css" />

<style type="text/css">

.style1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color:#003366;

}

.edit {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

border: 1px solid #0080C0;

background-color:#D9F2FB;

}

.desabilitado {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

border: none;

}

fieldset {

  border: 1px solid #003366;

  padding: 10px;

  margin: 0 0 1em;

  width:500px;

  color:#003366;

  }



body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-image: url(imagens/backgif.gif);

background-repeat: repeat;



}

.alertmsg {

   color:#FF0000;

}

.style2 {

   font-family: Verdana, Arial, Helvetica, sans-serif; 

   font-size: 12px; 

   color: #003366;

   font-weight: bold; 

}

#conteudo

{

   width:700px;

   margin:auto;    

}

#direita

{

 width:320px;

 border: 1px  solid;

 float:right;



}

#esquerda

{

   width:320px;

   float:left;

}



</style>





<script language="javascript" type="text/javascript">

   // validacao com jquery

   $(document).ready(function () {

       $("#paginas_txtCPF").mask("999.999.999-99");

       var validator = $("#formulario").validate({

           rules: {

                 paginas_txtCPF: { required: true, cpf: "both" }

           }

       ,

           messages: {

                          paginas_txtCPF: { required: "Informe seu CPF",

                   cpf: "cpf inválido!"

               }

           },

           wrapper: 'li',

           errorLabelContainer: $("#formulario div.alertmsg")



       });



   });   

</script>   

</head>

<body>

   <div align="center">

   <table border="0" cellpadding="0" cellspacing="0" width="750">

    <tr>

     <td><img src="imagens/spacer.gif" width="102" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="22" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="33" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="44" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="17" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="73" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="89" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="9" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="107" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="89" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="19" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="146" height="1" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="1" height="1" border="0" alt=""></td>

   </tr>



    <tr>

     <td colspan="5"><img name="lay_copep_r1_c1" src="imagens/lay_copep_r1_c1.jpg" width="218" height="108" border="0" alt=""></td>

   <td colspan="2"><img name="lay_copep_r1_c6" src="imagens/lay_copep_r1_c6.jpg" width="162" height="108" border="0" alt=""></td>

   <td colspan="3"><img name="lay_copep_r1_c8" src="imagens/lay_copep_r1_c8.jpg" width="205" height="108" border="0" alt=""></td>

   <td colspan="2"><img name="lay_copep_r1_c11" src="imagens/lay_copep_r1_c11.jpg" width="165" height="108" border="0" alt=""></td>

   <td><img src="imagens/spacer.gif" width="1" height="108" border="0" alt=""></td>

   </tr>

    <tr>

     <td colspan="3" background="imagens/lay_copep_r2_c1.jpg"> </td>

   <td colspan="9" background="imagens/lay_copep_r2_c1.jpg"> </td>

   <td><img src="imagens/spacer.gif" width="1" height="23" border="0" alt=""></td>

   </tr>

    <tr>

     <td colspan="12" bgcolor="#FFFFFF" align="center"> 



<form method="post" action="index.aspx" id="formulario">

<div class="aspNetHidden">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTQ0ODY4ODU3ZGQ9fSQO57AMhESnmPofp6J9j7CE8i89iCgk87ob7L/sTQ==" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['formulario'];

if (!theForm) {

   theForm = document.formulario;

}

function __doPostBack(eventTarget, eventArgument) {

   if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

       theForm.__EVENTTARGET.value = eventTarget;

       theForm.__EVENTARGUMENT.value = eventArgument;

       theForm.submit();

   }

}

//]]>

</script>





<script src="/WebResource.axd?d=BqG0BwWEB8QW-yMY6oUGng2&t=634224107733906250" type="text/javascript"></script>



<div class="aspNetHidden">



<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="lwXePmQCzPIkzsYj1niQ2A2" />

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLwpo/XCQL99LzPBgKOmIaOBgKPmIaOBgKB96zgCgKmseimBUxU4OmocJNQunh/1cZIqnIuFBDwgCCyC82UxcPE/XDS" />

</div>

<div id="conteudo" style="height: 423px">

<div id="esquerda" style="height: 193px; width: 320px">

<fieldset><legend>Digite seu CPF abaixo</legend>

         <span id="paginas_Label2">CPF</span>

       .:<input name="ctl00$paginas$txtCPF" type="text" maxlength="14" id="paginas_txtCPF" class="input" style="height:18px;width:178px;" />

       <br />

       <br />

       <table id="paginas_RadioButtonList1">

<tr>

	<td><input id="paginas_RadioButtonList1_0" type="radio" name="ctl00$paginas$RadioButtonList1" value="1" /><label for="paginas_RadioButtonList1_0">Realizar inscrição</label></td><td><input id="paginas_RadioButtonList1_1" type="radio" name="ctl00$paginas$RadioButtonList1" value="2" /><label for="paginas_RadioButtonList1_1">2ª via de Boleto</label></td>

</tr>

</table>

       <br />

       <input type="submit" name="ctl00$paginas$btnenviar" value="Pesquisar" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$paginas$btnenviar", "", false, "", "sem.aspx", false, false))" id="paginas_btnenviar" class="botao" />

       <div class="alertmsg"></div>

</fieldset>

</div>

</div>  

</form>



     </td></tr>

    <tr>

     <td><img name="lay_copep_r4_c1" src="imagens/lay_copep_r4_c1.jpg" width="102" height="61" border="0" alt=""></td>

   <td><img name="lay_copep_r4_c2" src="imagens/lay_copep_r4_c2.jpg" width="22" height="61" border="0" alt=""></td>

   <td colspan="2" background="imagens/lay_copep_r4_c2.jpg"> </td>

   <td colspan="2"><img name="lay_copep_r4_c5" src="imagens/lay_copep_r4_c5.jpg" width="90" height="61" border="0" alt=""></td>

   <td colspan="2"><img name="lay_copep_r4_c7" src="imagens/lay_copep_r4_c7.jpg" width="98" height="61" border="0" alt=""></td>

   <td><img name="lay_copep_r4_c9" src="imagens/lay_copep_r4_c9.jpg" width="107" height="61" border="0" alt=""></td>

   <td colspan="2"><img name="lay_copep_r4_c10" src="imagens/lay_copep_r4_c10.jpg" width="108" height="61" border="0" alt=""></td>

   <td background="imagens/lay_copep_r4_c2.jpg"> </td>

   <td><img src="imagens/spacer.gif" width="1" height="61" border="0" alt=""></td>

    </tr>

    </table>

  </div>   

</body>

</html>

 

Alguém se habilita? hehehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

quintelab    91

quintelab
Postado

Ao invés de faze verificação pelo ID do componente faça pela classe dele. Fica mais fácil pois o ID dos componentes mudam.

Ou se quiser mais facilidade, se estiver usando o framework 4, defina propriedade ClientIDMode="Static"

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

novato_PHP    0

novato_PHP
Postado

Pois é....

 

Estou usando o framework 4 sim, e mudei a propriedade ClientIDMode para Static conforme falado, mas não funcionou...

 

 

<form id="formulario" runat="server" clientidmode="Static">

 

"Ao invés de fazer verificação pelo ID do componente faça pela classe dele. Fica mais fácil pois o ID dos componentes mudam".

 

Tentei também com a classe criando uma classe para o formulario e depois mudando no jquery e nao foi.. .

$(document).ready(function () {
       $("#paginas_txtCPF").mask("999.999.999-99");
       var validator = $('.css_form').validate({
           rules: {
... continua ...

 

 

 

 

alguma ideia? Estranho que este mesmo código funciona normalmente em uma página sem master page...

Compartilhar este post

Link para o post
Compartilhar em outros sites

novato_PHP    0

novato_PHP
Postado

Quintelab,

 

 

Coloquei o componente updatepanel na master page, mas para que serve este componente updatepanel, como funciona?

Pois continua sem funcionar... Não entendo, pois na renderização em HTML ele não muda o ID do formulário. Como então não consigo acessá-lo?

Veja

 


<form method="post" action="index.aspx" id="formulario">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTQ0ODY4ODU3ZGQ9fSQO57AMhESnmPofp6J9j7CE8i89iCgk87ob7L/sTQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['formulario'];
if (!theForm) {
   theForm = document.formulario;
}
function __doPostBack(eventTarget, eventArgument) {
   if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
       theForm.__EVENTTARGET.value = eventTarget;
       theForm.__EVENTARGUMENT.value = eventArgument;
       theForm.submit();
   }
}
//]]>
</script>

 

OBS.: Estava de férias e por isso não havia respondido o post, estou agora retornando meus estudos em .net....

Compartilhar este post

Link para o post
Compartilhar em outros sites

valterfurtado    0

valterfurtado
Postado

Eu criei um código com jquery bem simples que sempre funciona... valida tranquilo

 

$("#<%=btnRespostaConcluir.ClientID %>").click(function () {
var cont = $(".validar6").length;
var campo = null;
       var foco = null;
       var alerta = "";

       for (var i = 0; i < cont; i++) {
       	campo = $("#" + $($(".validar6").toArray()[i]).attr("id"));
           if (campo.val() == "-1" || campo.val() == "" || campo.val().length < 1) {
               if (foco == null || foco == "")
                   foco = campo;

               alerta += $($(".validar6").toArray()[i]).attr("Mensagem") + "\n";
           }
       }

       if (foco != null)
           foco.focus();

       if (alerta != null && alerta.length > 0) {
           alert(alerta);
           return false;
       }
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos .NET
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito