HTML

Em por

No artigo de hoje veremos com efetuar uma validação de formulário em HTML, utilizando o plugin JQuery Validator, para garantirmos a confiabilidade dos dados inseridos pelo usuário.

validação de formulá com jquery

Regra de Negócio

Dê uma maneira simples, quando pensamos em regras de negócio, estamos pensando em Model. Tudo que estiver relacionado a acesso a banco e arquivos, validações em geral, cálculos e requisitos específicos do projeto devem ser representados pelo Model.

No desenvolvimento de um software a validação dos dados de entrada pelo usuário é muito importante, pois para uma boa avaliação dos dados, eles precisam ser corretos e padronizados para realizarmos futuras buscas em nosso banco de dados.

Em aplicações web não é diferente, precisamos validar nossos inputs (entradas de dados). Podemos fazer basicamente dois tipos de validações, server-side e cliente-side. Hoje vamos abordar o tipo cliente-side que é a validação feita antes dos dados serem enviados para o servidor.

Normalmente utilizamos Javascript puro, criando nossas funções de validações especificas para cada campo, mesmo que as lógicas se repitam, como por exemplo, campos que não podem ficar vazios, esse tipo de campo pode se repetir em inúmeras páginas de uma aplicação e sempre temos que reescrever a função que valida campos vazios.

Agora, imagine um sistema de médio porte onde termos muitas entradas de dados, seria inviável repetir tanto código. Pensando assim foi criada uma função genérica que contempla todas as regras que precisamos, basta apenas dize-las, escrevendo menos e fazendo mais.

É exatamente este trabalho que o nosso JQuery irá fazer.

Para começarmos, vamos criar nosso arquivo index.html e adicionar dentro das tags HEAD à chamada para nosso plugin. Você pode baixa-los ao final deste artigo.

 <!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="utf-8"/> <title>Valida&ccedil;&atildeo; de formul&aacute;rio com Jquery:</title> <link href="admin.css" type="text/css" media="screen" rel="stylesheet" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="validate.js" type="text/javascript"></script> <script> function add(){ validate('f1'); if(validateState){ alert('ok') } } </script> </head> <body> <ul id="formFloat"> <form name="f1" id="f1" class="formDefault" action="" method="post" onSubmit="return false" > <label>Nome:</label> <input type="text" name="str" id="str" class="required" min="5" /> <label>Telefone Fixo:</label> <input type="text" name="num" id="num" class="required numeric" min="10" max="10" /> <label>Email:</label> <input type="text" name="mail" id="mail" class="required email" /> <label>Password min 4 </label> <input type="password" name="password" id="password" class="required password" min="4" /> <label>(re)Password min 4 </label> <input type="password" name="rpassword" id="rpassword" class="required password" min="4" /> <p>&nbsp;</p> <label>&nbsp;</label> <button class="button" onclick="return add()">Valida Form</button> <p>&nbsp;</p> <p id="validate_message">&nbsp;</p> <p>&nbsp;</p> </form> </ul> </body> </html>

Perfeito, feito nosso HTML já podemos add nosso estilo através do css.

Lembrando que o nosso formulário é apenas um exemplo, você poderá adaptar da melhor maneira que desejar ao seu projeto, e o mesmo com o css, separando e colocando dentro de cada pasta que lhe convém.

 * { outline-style: none; outline:none; padding:0px; margin:0px; } html { outline-style: none; outline:none; padding:0px; margin:0px; } body { margin:0px; padding:0px; font:11px verdana; outline-style: none; } a:active { outline:none; } :focus { -moz-outline-style:none; } .hide { display:none; } #formFloat { margin-top:20px; padding:5px; border:0px solid red; } .formDefault .button { border:1px solid #b2b2b2; color:#666; padding:6px; font:12px verdana; background-color: #fff; } .formDefault .button:hover { border:1px solid #b2b2b2; color:#666; padding:6px; font:12px verdana; background-color: #f0f0f0; } .formDefault label { font:bold 11px verdana; padding:3px; padding-left:0px; margin:2px; margin-top:15px; color:#999; display: block; width:200px; border:0px solid blue; } .formDefault input { font:12px verdana; padding:6px; margin:2px; width:200px; border:1px solid #b2b2b2; background-color: #f9f9f9; color:#666; } .formDefault select { font:12px verdana; padding:6px; margin:2px; border:1px solid #b2b2b2; background-color: #f9f9f9; color:#666; } .formDefault option { font:11px verdana; padding:0px; margin:1px; border:0px solid #333; } .controls { padding-bottom: 10px; border-bottom:1px dashed #b2b2b2; } #validate_message { padding:5px; font: 11px verdana; color:red; border-bottom:0px dashed #b2b2b2; } .formDefault .invalid { border:1px solid red; }

Agora com nossa página criada e estilizada, vamos add nosso arquivo validate.js, na qual ele será o responsável pela verificação e validação dos inputs.

 /* Config Vars */ /* Nao alterar ValidateState */ validateState = false; /* Required message */ validateRequiredMsg = "Campo de preechimento obrigat&oacute;rio"; /* E-mail message */ validateMailMsg = "E-mail informado &eacute; inv&aacute;lido"; /* Numeric message */ validateNumericMsg = "O valor deve ser num&eacute;rico"; /* Min message */ validateMinMsg = "A quantidade m&iacute;nima de caracters &eacute;: "; /* Max message */ validateMaxMsg = "A quantidade m&aacute;xima de caracters &eacute;: "; /* Password message */ validatePasswordMsg = "Senhas n&atilde;o conferem"; function validate(form_id) { $('#'+form_id+' :input').each(function(){ /* required */ if ( $(this).hasClass('required') && $.trim( $(this).val() ) == ""){ $(this).addClass('invalid'); $(this).focus(); $('#validate_message').html(validateRequiredMsg); validateState = false; return false; } else{ $(this).removeClass('invalid'); validateState = true; } /* numeric value */ if ( $(this).hasClass('required') && $(this).hasClass('numeric') ){ var nan = new RegExp(/(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/); if (!nan.test($.trim( $(this).val() ))){ $(this).addClass('invalid'); $(this).focus(); $('#validate_message').html(validateNumericMsg); validateState = false; return false; } else{ $('#validate_message').html(''); $(this).removeClass('invalid'); validateState = true; } } /* mail */ if ( $(this).hasClass('email') ){ var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/); if (!er.test($.trim( $(this).val() ))){ $(this).addClass('invalid'); $(this).focus(); $('#validate_message').html(validateMailMsg); validateState = false; return false; } else{ $(this).removeClass('invalid'); validateState = true; } } /* min value */ if ( $(this).attr('min') && $(this).hasClass('required') ){ if($.trim($(this).val()).length < $(this).attr('min') ){ $(this).addClass('invalid'); $(this).focus(); $('#validate_message').html(validateMinMsg + $(this).attr('min')); validateState = false; return false; } else{ $('#validate_message').html(''); $(this).removeClass('invalid'); validateState = true; } } /* max value */ if ( $(this).attr('max') && $(this).hasClass('required') ){ if($.trim($(this).val()).length > $(this).attr('max') ){ $(this).addClass('invalid'); $(this).focus(); $('#validate_message').html(validateMaxMsg + $(this).attr('max')); validateState = false; return false; } else{ $('#validate_message').html(''); $(this).removeClass('invalid'); validateState = true; } } /* password */ if ( $(this).hasClass('password') && $(this).nextAll('.password').hasClass('password')){ if ($.trim( $(this).val() ) != $.trim( $(this).nextAll('.password').val() )){ $(this).nextAll('.password').addClass('invalid'); $(this).nextAll('.password').focus(); $('#validate_message').html(validatePasswordMsg); validateState = false; return false; } else{ $('#validate_message').html(''); $(this).nextAll('.password').removeClass('invalid'); validateState = true; } } }) }

Bem esse trecho de códigos fará basicamente o mesmo processo em todos os campos. Verificar se é vazio ou não, se contém o número de caracteres estipulado, e se caso não satisfaça essas condições ele add uma classe através do jquery, na qual essa classe mostrará uma mensagem de seu respectivo input. Agora se tudo estiver ok, ele validará e permitirá que os dados possam ser enviados a um banco de dados, por exemplo, ou para outra página por POST ou GET.

Faça o download do jquery.min diretamente no site do JQuery ou faça download do exemplo completo.

Download do arquivo completo Aqui...

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos. laugh

 

Veja Também:

Artigos Relacionados a categoria: HTML

Olá, deixe seu comentário para Validação de Formulário com JQuery

Já temos 3 comentário(s). DEIXE O SEU :)
Johng306

Johng306

Some really nice and useful information on this web site, also I conceive the style and design holds superb features.
★☆☆☆☆ DIA 11.01.15 20h01 RESPONDER
N/A
Enviando Comentário Fechar :/
Johnf358

Johnf358

As a Newbie, I am continuously searching online for articles that can aid me. Thank you.
★☆☆☆☆ DIA 11.01.15 20h01 RESPONDER
N/A
Enviando Comentário Fechar :/
Johnb922

Johnb922

Informações úteis, eu encontrei seu site por acaso, e eu estou chocado, porque esta reviravolta do destino não aconteceu mais cedo! hahaha
★☆☆☆☆ DIA 27.02.15 12h02 RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora