JQuery: Validação de inputs

Na criação de um formulário a validação dos dados de entrada é muito importante. Neste post, vamos aprender a validar os inputs, antes de submeter.

Abaixo uma estrutura HTML inicial para validação.

<form id="form" action="" method="post" name="form">
<input type="text" id="nome" name="nome" class="verificar" />
<br /><br />
<input type="text" id="sobrenome" name="sobrenome" class="verificar" />
<br /><br />
<input type="submit" id="salvar" value="Enviar" />
</form>

Você pode criar um arquivo de estilo css para ajudar na validação. A classe erro aplicará um borda no input.

.erro{
    border:2px solid #bf1e2c;
}

Aqui vem nosso script JQuery para fazer a validação.

$("#salvar").click(function(e){
e.preventDefault();
var nm_class = 'verificar';
var error = false;
inputs = $("form").find('INPUT[class*="' + nm_class + '"]');
 
$.each(inputs, function(i, value) {
    if(inputs[i].value == ''){
       $(this).addClass( "erro" );
           error = true;         
     }
});
 
if(error)
    return false;
else{    
   //$.ajax
   alert("funcionou");    
}    
});
 
// quando input recebe o foco
$('input[type="text"]').focus(function(){
    // Verifica se tem a classe erro que aplica um estilo ao input
    if ($(this).hasClass('erro')) {
        $(this).removeClass('erro');
    }
 
    // Verifica se o input tem valor e se houver remove a class erro
    if ($(this).val()) {
        $(this).removeClass('erro');
    }
})   
 
// quando input perde o foco
$('input[type="text"]').blur(function(){
    // Verifica se o input tem valor e se houver remove a class erro
    if (!$(this).val()) {
        $(this).addClass('erro');
    }
})

Veja o funcionamento, clicando aqui: http://jsfiddle.net/X5K7c/8/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *