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/