Jquery - Confirmação de email

zenfra · Janeiro 1, 2010

Boa tarde,

Eu tenho dois campos, onde no segundo o e-mail informado no campo anterior deve ser confirmado.

Estou querendo saber se alguém sabem como efetuar confirmação e validação de e-mail com o jquery?

Obrigado!

brcontainer · Janeiro 2, 2010

Sim tem como validar o email por Jquery mas confirmar eu não entendi, o que quer dizer com confirmar? Verificar se ele foi enviado ao servidor? Ou se chegou no email?

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Google: http://www.google.com/search?q=jquery+validate+form&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:pt-BR:official&client=firefox-a

Esta pergunta não tem haver com este forum né? Aguarde o moderador mover para a área certa http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

lucaswxp · Janeiro 2, 2010

Tópico Movido

CakePHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript Frameworks

zenfra · Janeiro 2, 2010

Tem haver sim cara, tem haver porque quero utilizar ele com o cakePHP...

Bom, mas o confirmar que digo é, quando o cara digita o e-mail por exemplo em um campo e existe outro campo para você digitar o mesmo e-mail novamente para confirmar se o e-mail que você digitou esta correto.

Att,

Wagner

srnetcave · Janeiro 2, 2010

Segue ai um exemplo...

<script type="text/javascript">
	$(document).ready(function(){
		$('#email2').blur(function(){
			if($('#email2').val() !== '')
			{
				if($('#email2').val() !== $('#email1').val())
				{
					alert('Email invalido: Confirme seu email!');
				}
			}
		});
	});
</script>

Basta usar sua criatividade para criar um UI mais bacana. Por exemplo, ao inves de um alert, voce pode exibir a msg de error em uma div ao lado do seu campo. Apenas uma ideia. Valendo lembrar que o exemplo acima, apenas compara os valores quando o campo email2 perde o foco(onBlur), em uma aplicacao real tb validaria no evento submit do formulario.

Outra coisa, voce pode utilizar o validation Plugin para o JQuery. Ele ja vem com varios validators, super simples.

Da uma olhada ai. Validation Plugin

Flw

zenfra · Janeiro 2, 2010

Boa tarde,

Bacana... então... eu só precisava fazer esse aqui funcionar, porque depois eu utilizo na rules o equalTo que já serve para validar se o campo anterior é igual ao informado no equalTo... porém, esse aqui não esta funcionando...

<?php

 print $javascript->link( array( 'jquery-1.3.2', 'jquery.validate' ) , false );
 
 print $javascript->codeBlock('
  $(document).ready( function(){
			                      $("#UsuariosAddForm").validade({
							         rules:{
							                 UsuarioDsNome: { required: true }
							}	  
						 });		 
                     });  
                 ');

 print $form->create( 'Usuarios', array( 'url' => array( 'controller' => 'Usuarios', 'action' => 'adicionar', '5') ) );
 print $form->label('Nome ( * requerido ) ');
 print $form->input('Usuario.ds_nome', array( 'div' => array( 'class' => 'classInput' ), 'label' => false, 'style' => 'width:100%;' ) );
 print $form->label('email ( * requerido, informe um e-mail valido ) ');
 print $form->input('Usuario.ds_mail',array( 'div' => array( 'class' => 'classInput' ), 'label' => false , 'style' => 'width:100%' ) );
 print $form->label('Confirmação do email ( * requerido, conformação de e-mail )');
 print $form->input('Usuario.ds_mail_conf',array( 'div' => array( 'class' => 'classInput' ), 'label' => false , 'style' => 'width:100%' ) );
 print $form->label('Senha ( * requerido )');
 print $form->input('Usuario.ds_senha',array( 'type' => 'password', 'div' => array( 'class' => 'classInput' ), 'label' => false , 'style' => 'width:200px;'));
 print $form->label('Confirmação da senha ( * requerido ) ');
 print $form->input('Usuario.ds_senha_conf',array( 'type' => 'password', 'div' => array( 'class' => 'classInput' ), 'label' => false , 'style' => 'width:200px;'));
 print $form->input('Usuario.atualizacao_id', array( 'type'=> 'hidden' , 'value' => '1' ));
 print $form->input('Usuario.cadastro_id', array( 'type'=> 'hidden' , 'value' => '1' ));
 print $form->input('Usuario.dt_atualizacao', array( 'type' => 'hidden', 'value' => date( 'Y-m-d H:m:s' )));
 print $form->input('Usuario.dt_cadastro', array( 'type' => 'hidden', 'value' => date( 'Y-m-d H:m:s' )));
 print $form->input('Usuario.autoridade_id', array( 'type' => 'hidden', 'value' => '5'));
 print $form->submit( 'Gravar' , array( 'div' => array( 'class' => 'classSubmit' )));
 print_r($this->data);
?>

O firebug acusa o seguinte erro de javascript quando clico no botão gravar:

$("#UsuariosAddForm").validade is not a function

[break on this error] UsuarioDsNome : { required: true }\r\n

zenfra · Janeiro 2, 2010

Pessoal,

O código html gerado no cakephp é o seguinte..

<!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" dir="ltr">
<head>

 <title>Zenfra - Soluções em Tecnologia - Apresentação</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" type="text/css" href="/zenfra1.5/sistema/css/estrutura.css" />
 <script type="text/javascript" src="/zenfra1.5/sistema/js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="/zenfra1.5/sistema/js/jquery.validate.js"></script>
	<script type="text/javascript" src="/zenfra1.5/sistema/js/frm.candidato01.js"></script>

</head>
<body>
 <div id="geral">
  <div id="topo">
   <div id="topotop">
    <ul>
	 <li>Cliente</li>
	 <li>Consultor</li>
	 <li>Suporte</li>

	</ul>
   </div>
   <div id="topomei">
    <img src="../../img/logo.png" alt="Zenfra - Soluções em Tecnologia" />
   </div>
   <div id="topobas">
    <ul>
	 <li><a href="../../../index.php">Sobre a empresa</a></li>

	 <li><a href="../../../servico.php">Nossos serviços</a></li>
	 <li><a href="../../../trabalho.php">Trabalhe conosco</a></li>
	 <li><a href="../../../contato.php">Fale conosco</a></li>
	</ul>
   </div>
  </div>
  <div id="meio">

  <div id="meioesquerda">
   <h2>Trabalhe conosco</h2>
   <h1>Procurando novas oportunidades?</h1>
<p>Se você busca novas oportunidades de trabalho na área de tecnologia, cadastre seu currículo em nossa base de dados através do nosso site, tenha acesso a área restrita do candidato e garanta sua participação nas oportunidades que disponibilizamos e aumente sua visibilidade no mercado de trabalho.</p>
<p>Efetuando seu cadastro em nossa base de dados, suas informações estão imediatamente disponíveis para clientes e parceiros da Zenfra efetuarem consultas e selecionarem de acordo com as suas necessidades e as características da vaga os perfis que melhor se enquadrarem.</p>
<p>Na área restrita do candidato, são disponibilizadas avaliações de acordo com as características do seu currículo e perfil, as avaliações são efetuadas por meio da Internet e são a primeira etapa para o alcance do seu espaço no mercado de trabalho.</p>
	   <form id="UsuariosAddForm" method="post" action="/zenfra1.5/sistema/Usuarios/adicionar/5"><fieldset style="display:none;"><input type="hidden" name="_method" value="POST" /></fieldset><label for="UsuariosNome(*Requerido)">Nome ( * Requerido ) </label><div class="classInput"><input name="data[Usuario][ds_nome]" type="text" style="width:100%;" maxlength="100" value="" id="UsuarioDsNome" /></div><label for="UsuariosEmail(*Requerido,InformeUmE-mailValido)">Email ( * Requerido, Informe Um E-mail Valido ) </label><div class="classInput"><input name="data[Usuario][ds_mail]" type="text" style="width:100%" maxlength="100" value="" id="UsuarioDsMail" /></div><label for="UsuariosConfirmaçãoDoEmail(*Requerido,ConformaçãoDeE-mail)">Confirma��o Do Email ( * Requerido, Conforma��o De E-mail )</label><div class="classInput"><input name="data[Usuario][ds_mail_conf]" type="text" style="width:100%" value="" id="UsuarioDsMailConf" /></div><label for="UsuariosSenha(*Requerido)">Senha ( * Requerido )</label><div class="classInput"><input type="password" name="data[Usuario][ds_senha]" style="width:200px;" value="" id="UsuarioDsSenha" /></div><label for="UsuariosConfirmaçãoDaSenha(*Requerido)">Confirma��o Da Senha ( * Requerido ) </label><div class="classInput"><input type="password" name="data[Usuario][ds_senha_conf]" style="width:200px;" value="" id="UsuarioDsSenhaConf" /></div><input type="hidden" name="data[Usuario][atualizacao_id]" value="1" id="UsuarioAtualizacaoId" /><input type="hidden" name="data[Usuario][cadastro_id]" value="1" id="UsuarioCadastroId" /><input type="hidden" name="data[Usuario][dt_atualizacao]" value="2010-01-02 17:01:28" id="UsuarioDtAtualizacao" /><input type="hidden" name="data[Usuario][dt_cadastro]" value="2010-01-02 17:01:28" id="UsuarioDtCadastro" /><input type="hidden" name="data[Usuario][autoridade_id]" value="5" id="UsuarioAutoridadeId" /><div class="classSubmit"><input type="submit" value="Gravar" /></div>Array
(
    [Usuario] => Array
        (
            [ds_nome] => 
            [ds_mail] => 
            [ds_mail_conf] => 
            [ds_senha] => 
            [ds_senha_conf] => 
            [atualizacao_id] => 1
            [cadastro_id] => 1
            [dt_atualizacao] => 2010-01-02 17:01:25
            [dt_cadastro] => 2010-01-02 17:01:25
            [autoridade_id] => 5
        )

)
 
  </div>

   <div id="meiodireita">
     <div id="tecnologia">
       <div id="tecnologiatop">
	    <p>Tecnologias</p>
	   </div>
       <div id="tecnologiamei"></div>
       <div id="tecnologiabas"></div>
    </div>

   </div>
  </div>
  <div id="base">
   <div id="basetop"></div>
   <div id="basemei"></div>
   <div id="basebas">
    <ul>
	 <li><a href="../../../index.php">Sobre a empresa</a></li>

	 <li><a href="../../../servico.php">Nossos serviços</a></li>
	 <li><a href="../../../trabalho.php">Trabalhe conosco</a></li>
	 <li><a href="../../../contato.php">Fale conosco</a></li>
	</ul>
   </div>
  </div>
 </div>

 <div id="geralbase">
   <p><img src="../../img/logobase.png" alt="Zenfra - Soluções em Tecnologia" />© Copyright 2010. Todos os direitos reservados.</p>
 </div>


 <div id="fundo"></div>
</body>
</html><!-- 1.6742s --><table class="cake-sql-log" id="cakeSqlLog_12624605084b3f9e5c7fb862_93020446" summary="Cake SQL Log" cellspacing="0" border = "0">
<caption>(default) 1 query took 3 ms</caption>
<thead>
<tr><th>Nr</th><th>Query</th><th>Error</th><th>Affected</th><th>Num. rows</th><th>Took (ms)</th></tr>

</thead>
<tbody>
<tr><td>1</td><td>DESCRIBE `zen_usuarios`</td><td></td><td style = "text-align: right">11</td><td style = "text-align: right">11</td><td style = "text-align: right">3</td></tr>
</tbody></table>

Se notarem, vocês conseguem ver que os scritps do jquery são inseridos conforme as linhas abaixo:

<script type="text/javascript" src="/zenfra1.5/sistema/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/zenfra1.5/sistema/js/jquery.validate.js"></script>
<script type="text/javascript" src="/zenfra1.5/sistema/js/frm.candidato01.js"></script>

o terceiro javascript inserido, contém as linhas que devem validar o formulário, porém isso não ocorre e também não ocorrem erros:

<script type="text/javascript" src="/zenfra1.5/sistema/js/frm.candidato01.js"></script>

O javascript anterior inserido tem as seguintes linhas:

 $(document).ready( function(){
    $('#UsuariosAddForm').validate({
 					                 rules:{
							                  UsuarioDsNome : { required: true }
							               },
                                     messages:{
                                              UsuarioDsNome :  'O campo nome é obrigatório' 
                                      }									 
						          });		 
                              });

Alguém tem alguma idéia do por que não funciona?

brcontainer · Janeiro 2, 2010

Amigo você conferio na pasta:

/zenfra1.5/sistema/js/jquery.validate.js

Se o arquivo esta lá mesmo? Talvez tenha esquecido de adicionar a pasta.

Feliz ano novo.

zenfra · Janeiro 2, 2010

Conferi sim..

inclusive clicando no caminho dos arquivos abaixo no html gerado, ele exibe o conteúdo dos arquivos do jquery e do jquery.validate

brcontainer · Janeiro 2, 2010

acho que é esse o teu erro:

$("#UsuariosAddForm").validade({

não seria assim:

$("#UsuariosAddForm").validate({

Atenciosamente silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

zenfra · Janeiro 2, 2010

já corrigi esse erro, está assim agora:

$(document).ready( function(){
    $('#UsuariosAddForm').validate({
 					                 rules:{
							                  UsuarioDsNome : { required: true }
							               },
                                     messages:{
                                              UsuarioDsNome :  'O campo nome é obrigatório' 
                                      }									 
						          });		 
                              });

Caraca, mas que zica viu!

brcontainer · Janeiro 2, 2010

Mas então ta tudo certo agora né?

Atenciosamente silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

zenfra · Janeiro 2, 2010

Bom... acho que resolvi..

$(document).ready( function(){
    $('#UsuariosAddForm').validate({
 					                 rules:{
							                  'data[Usuario][ds_nome]' : { required: true }
							               },
                                     messages:{
                                              'data[Usuario][ds_nome]' :  'O campo nome é obrigatório' 
                                      }									 
						          });		 
                              });

Eu troquei o nome do informado como campo que deve ser validado, anteriormente estava utilizando o id que no caso era "UsuarioDsNome", agora estou utilizando o name que é data[usuario][ds_nome] gerado pelo cakephp...

Bom.. achei que deveria funcionar

zenfra · Janeiro 2, 2010

A unica coisa que não está funcionando agora é o equalTo... coloco o mesmo e-mail e ele diz que não é igual...

será por causa da forma que esta o name do campo?

 $(document).ready( function(){
    $('#UsuariosAddForm').validate({
 	                             rules:{
		   	                     'data[Usuario][ds_nome]'       : { required: true },
					     'data[Usuario][ds_mail]'       : { required: true,
					                                           email: true },
					     'data[Usuario][ds_mail_conf]'  : { required: true,
                                                                                    email: true,
                                                                                  equalTo: '#data[Usuario][ds_mail]' },
					     'data[Usuario][ds_senha]'      : { required: true },
					     'data[Usuario][ds_senha_conf]' : { required: true,
					                                         equalTo: '#data[Usuario][ds_senha]' }
				            },
                                  messages:{
                                              'data[Usuario][ds_nome]'      :  'O campo nome é obrigatório',
            			  	      'data[Usuario][ds_mail]'      : { required: 'O campo email é onrigatório',
                                                                                   email: 'Informe um e-mail valido' },
					      'data[Usuario][ds_mail_conf]' : { required: 'O campo de confirmação de e-mail é obrigatório',
                                                                                   email: 'Informe um e-mail valido',
                                                                                 equalTo: 'O e-mail informado não é igual ao e-mail anterior' }	,
 					      'data[Usuario][ds_senha]'     : { required: 'O campo senha é obrigatório' },
                            		      'data[Usuario][ds_senha_conf]': { required: 'O campo de confirmação de senha é obrigatório',
                                                                                 equalTo: 'A senha informada não é igual a senha anterior' }											  
                                      }									 
						          });		 
                              });

Arquivado

Jquery - Confirmação de email

Recommended Posts

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucaswxp 22

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

srnetcave 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zenfra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante