Validando formulários com JQuery-Plugin-Validation
Apesar de ser fundamental validar as informações enviadas por um formulário no lado do servidor, também é importante validar as informações no lado do cliente evitando assim que o usuário tenha que enviar o formulário, que leva algum tempo, para saber que esqueceu de preencher um campo obrigatório.
Existe um plugin para JQuery que nos facilita muito a vida, o jquery-plugin-validation que nos permite uma boa customização nas validações. Vamos aos exemplos.
O modo mais fácil de validar é adicionar um classe ao input que deve ser validado.
Primeiramente baixe o plugin jquery-plugin-validation e adicione na página o arquivo da biblioteca JQuery e o arquivo plugin jquery.validate.js
.
Após isso podemos começar com nosso formulário.
<form method="post" action="mostrar.php" id="form1"> <div> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" class="required" /> </div> <div> <label for="sobrenome">Sobrenome:</label> <input type="text" name="sobrenome" id="sobrenome" class="required" /> </div> <div class="submit"> <input type="submit" /> </div> </form>
Repare que foi adicionada a classe required nos inputs que devem ser preenchido, o plugin nos fornece alguma as seguinte validações:
Classes
- required: Não pode ser deixado em branco.
- email: Valida E-mail.
- url: Valida um endereço de um site.
- date: Valida uma data.
- number: Valida que o valor informado seja numérico.
Também podemos utilizar os atributos:
- minlength: Número minimo de caracteres.
- maxlength: Número máximo de caracteres.
O Javascript para valida o formulário é o seguinte:
$(document).ready(function(){ $("#form1").validate(); });
Como você irá notar caso um campo não seja válido o plugin irá criar um novo elemento label após o campo do formulário, com a classe error que pode ser estilizado como queira, ma existe um pequeno problema, a mensagem gerada é em inglês e em algumas situações queremos customizar essa mensagem. Veja o exemplo:
$("#form1").validate({ rules:{ nome:{ required:true, minlength:5 }, sobrenome:{ required:true, minlength:5 } }, messages:{ nome:{ required:"Você deve preencher o nome", minlength:"O nome deve ter mais que 5 caracteres" }, sobrenome:{ required:"Você deve preencher o sobrenome", minlength:"O sobfenome deve ter mais que 5 caracteres" } } });
Bom esse é o básico, até mais e obrigado pelos peixes!