HTML

Em 06/01/2015 às 08:01h por Leonardo

Validação de Formulário com JQuery

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. =)