Percorrendo formulário e encontrando inputs vazios com jQuery

[Andrew Edberg 0]

Olá estou chegando agora ao fórum e gostaria de alguns esclarecimentos sobre uma function que estou querendo fazer para percorrer todo o formulário na busca de inputs vazios e em seguida executar um alert para usuário informando que existem campos vazios no formulário.

Segue a function que estou tentando aplicar.

 

 

$(document).ready(function(){
$("#cadastro").click(function(){
	var cont = 0;
		$("#form1 input").each(function(){
			if($(this).val() == "")
             {
                cont++;
             }
	});
		if(cont != 0)
			{
			 	alert("Existem campos vazios");
				return false;
			}
			return true;
	});
});

 

Fiz algumas mudanças e parece que resolveu, mas na hora do return false; a página é atualizada e todos os dados preenchidos desaparecem, alguém poderia me explicar o porque disso acontecer? Obrigado!

$(document).ready(function(){
$("#cadastro").click(function(){
		$("#form1 input").each(function(){
			if($(this).val() == "")
             {
				 alert("Existe(em) campo(os) vazio(os) neste fomulário");
				 return false;

             }else{
			 return true;
			 }
		});
			
	});

});

[FreitasMT 29]

Boa madrugada.........

 

Tenho o prazer de te dizer que hoje existem pelo menos umas 10 formas diferentes de fazer isso.

 

dentre todas a mais genérica, fácil e rápida que conheço é um plugin muito leve baseado em jQuery que serve expressamente para validar campos de formulário.

 

seu nome é o jquery validate

 

 

aqui tem uns exemplos bem práticos que eu fiz...

 

https://drive.google.com/file/d/0BwBEh4QJvkXjNklBTFhhYmdXWTg/edit?usp=sharing

 

 

pegue a biblioteca que está lá e aproveite pois já está traduzida pois o plugin é em inglês.

 

lembrando que você deve sempre separar os campos por alguma content como no caso eu usei a tag p se não não valida (já quebrei a cabeça com isso).

 

para saber mais recomendo que visite

http://jqueryvalidation.org/

 

 

abs

[Preceptor 3]

Como você colocou o alerta dentro do each, você está dizendo para o navegador alertar a cada campo vazio.

 

Eu prefiro verificar se ha primeiro campos vazios para depois emitir ou nao um alerta

$(document).ready(function(){

$("#cadastro").click(function(e){

	// bloqueando envio do form
	e.preventDefault();
		
	var erros = 0;
		
	// verifica se ha campos vazios
	$("#form1 input").each(function(){
			
		// conta erros
		$(this).val() == "" ? erros++ : "";
			
	});
		
	// verifica se ha erros
	if(erros > 0 ){
				 
		alert("Existe(em) campo(os) vazio(os) neste fomulário");
				
    }else{
		//return true;	
		$("#form1").submit()
	}		
			
	});

});

Para ficar mais charmoso e mais agradável ao usuário, recomendo o uso de um div formatado com css ao invés de um alerta.