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.
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/