Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
Tópico Movido
CakePHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript Frameworks
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
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
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
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"](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?
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.
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
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
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!
Mas então ta tudo certo agora né?
Atenciosamente silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif
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
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' }
}
});
});
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