GIF89a; validate – Emerson Broga https://emersonbroga.com Sat, 22 May 2010 14:39:35 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 https://emersonbroga.com/wp-content/uploads/2023/08/cropped-logo-b-pink-512x512-1-32x32.png validate – Emerson Broga https://emersonbroga.com 32 32 jQuery Validate – Validando Formulários (2019) https://emersonbroga.com/validando-formularios-com-jquery-validate/ https://emersonbroga.com/validando-formularios-com-jquery-validate/#comments Sat, 22 May 2010 14:39:35 +0000 https://emersonbroga.com/?p=86 Read more…]]> O que é o jQuery Validate

Olá! O jQuery Validate é um plugin para jQuery que facilita a validação de formulários html com javascript.
Criado pelo pessoal do bassistance.de e previamente chamado de jQuery Validation esse plugin foi disponibilizado de forma open source está em constante atualização. A versão mais atual do jQuery Validate pode ser encontrada para download em sua página de releases ou se prefirir ela está disponível também no CDN.js

Configurando o jQuery Validate em sua página

Para utilizar o jQuery Validate, a primeira coisa que você precisa fazer é adicioná-lo a sua página html, porém por se tratar de um plugin do jQuery, você precisa também importar o jQuery. Você consegue fazer isso da seguinte forma:

Validando Formulários com jQuery Validate

Validando Formulários com jQuery Validate

Como vocês podem perceber a importação jQuery e do jQuery Validate foram feitas antes do fechamento da tag <body>.

O Formulário

Agora que já temos as dependências importadas em nossa página, vamos criar um simples formulário html com os campos mais comuns de um formulário de cadastro, para que possamos fazer a validação na mesma página, sem recarregar.
Nesse formulário teremos nome, email, senha, confirmação de senha e por fim o aceite de termos e condições de uso. Com esses 5 campos, vamos conseguir aplicar algumas regras de validação, como campos obrigatórios, campo com email válido, campo com confirmação e por aí vai. Então vamos lá, faça o formulário da assim:

Formulário

Formulário

Validando o Formulário

Com tudo devidamente adiconado ao html, chegou a hora de validar o formulário na mesma página usando javasvcript, com a ajuda do jQuery e do jQuery Validate.
Para isso vamos abrir uma tag <script type="text/javascript"></script> e adiconar as nossas regras:

Validando o Formulário

Validando o Formulário

Pronto! Agora é só rodar o código no browser e ver tudo funcionando. Com isso a gente conseguiu validar um formulário html, que pode ser feito em PHP, NodeJs ou qualquer outra linguagem de backend. Como tudo acontece no front-end a experiência do usuário fica muito mais agradável.

Código completo

O código completo apenas é exibido no desktop, pois a leitura fica mais fácil, mas você pode acessar tambem pelo link direto do Gist.


No código completo, eu adicionei tambem alguns estilos css, apenas para que a pagina fique mais apresentável.

Para saber mais…

Agora que você já sabe como utilizar o jquery validate, você pode recorrer a documentação para verificar os diversos métodos de validação que o plugin tem por padrão.

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, por que você não pode ficar de fora!

  1. Curta nossa página no facebook
  2. Não perca as atualizações no twitter
  3. Veja as dicas no instagram
  4. Siga nossos repositórios no github
  5. Faça parte da nossa lista de desenvolvedores

Esse post foi publicado em 22 de maio de 2010, e teve uma atualização recente. Este é um post de cunho didático para quem está começando com o uso do jquery e o jquery validate, o código pode sim ser refatorado para melhor leitura, assim como também podemos usar as tags html5 para verificação de campos obrigatórios, email, ect. Enfim, tudo pode ser melhorado, mas devemos ir passo a passo.

]]> https://emersonbroga.com/validando-formularios-com-jquery-validate/feed/ 30 Jquery Validation Campo único (login, email,etc…) https://emersonbroga.com/jquery-validation-campo-unico/ https://emersonbroga.com/jquery-validation-campo-unico/#comments Mon, 19 Apr 2010 13:30:59 +0000 https://emersonbroga.com/?p=58 Read more…]]> Após um bom tempo sem postar, estou de volta.

Dessa vez eu vou falar um pouco sobre o jQuery Valitation um plugin do jQuery para validação de campos.
Vou abordar sobre uma validação remota que está presente nesse plugin e é muito útil para validar campos únicos em formulário.

Por exemplo, no seu site, você tem um formulário de cadastro que tem os campos login e senha, mas o campo de login deve ser único e você quer fazer essa validação usando o plugin Validation.

1º passo: Incluir o jQuery e o plugin Validation ao seu html:
[html]<!– Inclusão do Jquery –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!–mce:0–></script>
<!– Inclusão do Jquery Validate –>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" type="text/javascript"><!–mce:1–></script>[/html]
2º passo: Criar o formulário:
[html]<form id="meu_form" method="post">
Login:
<input id="login" name="login" type="text" />
Senha:
<input id="senha" name="senha" type="password" />
<input type="submit" value="Cadastrar" />
</form>
[/html]
3º passo: Fazer a validação
[js]<!– Validação do forumlário –>
$(document).ready(function(){
$(‘#meu_form’).validate({
rules:{
login:{ required: true, remote: ‘verifica.php’ }
},
messages:{
login:{ required: ‘Este Campo é obrigatorio’ , remote: ‘Este Login já está em uso.’}
}

});
});[/js]
Repare que o campo ‘login’ tem a validação ‘required’ (campo obrigatório) e a validação ‘remote’ (remota), sendo assim quando o usuário acaba de digitar o login ele vai no servidor e passa esse valor via GET

Pelo firebug podemos observar a requisição sendo feita ao servidor:
validation_campo_unico_1

Como no validate colocamos remote: ‘verifica.php’ , é enviado o parametro login (nome do campo) e o valor digitado.
No arquivo verifica.php, recebemos esse valor com o $_GET[‘login’] , fazemos a consulta no banco e então
[php]//Se o login já existir você exibe false
echo ‘false’;
//Se o login não existir
echo ‘true’;[/php]
pois essa verificação retorna ao validate se o campo é válido ou não.

Veja o Demo.

Faça o download dos arquivos.

Espero que tenham gostado.
Obrigado pela visita.

Dê sua nota: [ratings]

]]> https://emersonbroga.com/jquery-validation-campo-unico/feed/ 27