Antes de trabalhar na Ogilvy eu utilizava um plugin para fazer uma validação, usava bastante o JCheck que por sinal é muito bom. Mas não da pra fazer tudo o que você quer.
Ao entrar na Ogilvy, Felipe Rodrigues me passou um código que ele mesmo fez…
Fui estudar o código e vi como é simples e fácil de implementar e manipular.
Bem vamos ao que interessa.
Tenho aqui meu form no HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<form id="form-contato" method="post">
<ol>
<li>
<label for="nome">Nome</label>
<input id="nome" class="valida" type="text" name="nome" value="Digite o seu Nome" />
<span class="box-error">Campo está em branco</span>
</li>
<li>
<label for="email">E-mail</label>
<input id="email" class="valida email" type="text" name="email" value="" />
<span class="box-error">Campo está em branco ou errado</span>
</li>
<li>
<label for="assunto">Assunto</label>
<input id="assunto" type="text" name="assunto" value="" />
</li>
<li>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" class="valida" name="mensagem"></textarea>
<span class="box-error">Campo está em branco</span>
</li>
<li>
<input id="enviar" class="submit" type="submit" name="enviar" value="enviar" />
</li>
</ol>
</form> |
Um CSS básico:
|
1 2 3 4 5 6 |
*{font:12px arial;color:#000}
li{width:100%;margin:0 0 10px;display:inline-block;position:relative}
label{margin:0 0 2px;display:block}
input,textarea{width:200px;padding:3px 5px;border:1px solid #000;font-size:12px arial;resize:none}
.box-error{width:200px;margin-left:-100px;padding:5px 5px;display:none;position:absolute;top:0;left:50%;text-align:center;background-color:#fff}
.arrow{width:10px;height:10px;margin-left:-10px;display:block;position:absolute;left:50%;bottom:-8px;background: url('http://cdn1.iconfinder.com/data/icons/lullacons/arrow-single-down-red.png') 0 0 no-repeat} |
E o JS com a validação…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
$(document).ready(function(){
$('#form-contato').submit(function(event) {
var form = $(this);
// a cada elemento que tem a class "valida" faca:
form.find(".valida").each(function(index) {
// pega o value de cada elemento
var thisVal = $(this).val();
// se tiver a classe valida
if($(this).hasClass('valida')){
// verifica se o value esta vazio
if (thisVal == "") {
// se estiver vazio faca:
// add a classe erro ao elemento vazio.
$(this).addClass('error');
// e mostrar o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeIn();
}
}
// caso queira validar um campo qualquer do form:
// validacao input nome
if ($(this).attr("id")=="nome"){
if (thisVal=='Digite o seu Nome'){
// add a classe erro ao elemento.
$(this).addClass('error');
// e mostrar o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeIn();
}else{
// remove a classe erro ao elemento
$(this).removeClass('error');
// e esconde o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeOut();
}
};
//validacao input email
var objEmail = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
if ($(this).hasClass('email')) {
if (!objEmail.test(thisVal)){
$(this).addClass('error');
$(this).parent().find('.box-error').fadeIn();
}else{
$(this).removeClass('error');
$(this).parent().find('.box-error').fadeOut();
}
}
//Retira o ERROR no keyup;
$(this).keyup(function() {
var thisVal = $(this).val();
if($(this).attr("id")=="nome"){
if(thisVal=="" || thisVal=="Digite o seu Nome"){
// add a classe erro ao elemento vazio.
$(this).addClass('error');
// e mostrar o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeIn();
}else{
// remove a classe erro no keyup
$(this).removeClass('error');
// e esconde o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeOut();
}
}else if($(this).attr('id')=='email'){
if (objEmail.test(thisVal)) {
$(this).removeClass("error");
$(this).parent().find('.box-error').fadeOut();
}else{
$(this).addClass('error');
$(this).parent().find('.box-error').fadeIn();
}
}else if($(this).attr("id")=="mensagem"){
if (thisVal==""){
// add a classe erro ao elemento vazio.
$(this).addClass('error');
// e mostrar o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeIn();
}else{
// remove a classe erro no keyup
$(this).removeClass('error');
// e esconde o box de erro do elemento.
$(this).parents("li").find('.box-error').fadeOut();
}
}
});
}); // end each
// conta quantas classes "error"" existe
var errors = form.find('.error').size();
// se nao tiver nenhum "error""
if(errors=="0"){
$('.box-error').fadeOut();
// aqui vai o envio do formulario via ajax...
}else{
$(".error").each(function() {
$(this).parents("li").find('.box-error').fadeIn();
});
}
event.preventDefault();
});
}); |
E pronto, aqui segue o link: http://jsfiddle.net/lucascmelo/QA4FT/
