Aprenda neste post, como validar os campos de texto (type=text) de um formulário, antes de submeter.
- html
<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> |
- css
.erro{ border:2px solid #bf1e2c; } |
- jquery
$("#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"); } }); $('input[type="text"]').focus(function(){ // Verifica se tem a classe erro e não continua se não houver 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'); } }) $('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/