Como saber cuantos campos de un form quedaron vacios?

[adryan310]

Hola a todos

Quiero hacer una funcion javascript que me retorne la cantidad de campos vacios en un form. Esto con el fin de obligar al usuario llenar al menos 3 campos para poder realizar una busqueda.

Hice lo siguiente pero no me funciona:

Código HTML:

function quantityOfEmpty(){
   var account =  document.frmSearch.Account.value;
   var first =    document.frmSearch.FirstName.value;
   var last =     document.frmSearch.LastName.value;
   var email =    document.frmSearch.Email.value;
   var pass =     document.frmSearch.Password.value;
   var web =      document.frmSearch.cmbWebSite.value;
   var ip =       document.frmSearch.IpAddress.value;
   var login1 =   document.frmSearch.LoginDateIni.value;
   var login2 =   document.frmSearch.LoginDateEnd.value;
   var zip =      document.frmSearch.Zip.value;
   var phnumber = document.frmSearch.Phnumber.value;
   var active =   document.frmSearch.optionsActive.value;
   var success =  document.frmSearch.optionsSuccess.value;
   
   validate(account,first,last,email,pass,web,ip,login1,login2,zip,phnumber,active,success)
   
   if(validate < 3 ){
	 alert('Debes de llenar al menos 3 campos');
     return false;
   }else
     return true;
}

function validate(account,first,last,email,pass,web,ip,login1,login2,zip,phnumber,active,success){
	var count = 0;
	
	if(account.value != "")
	  count = count + 1;
	
	if(first.value != "")
	  count = count + 1;
	 
	if(last.value != "")
	  count = count + 1;
	  
	if(email.value != "")
	  count = count + 1;
	  
	if(pass.value != "")
	  count = count + 1;
	  
	if(web.value == 0)
	  count = count + 1;
	  
	if(ip.value != "")
	  count = count + 1;
	  
	if(login1.value != "")
	  count = count + 1;
	  
	if(login2.value != "")
	  count = count + 1;
	  
	if(zip.value != "")
	  count = count + 1;
	 
	if(phnumber.value != "")
	  count = count + 1;
	  
	if(active.value != "")
	  count = count + 1;
	  
	if(success.value != "")
	  count = count + 1;
	  
	return count;
}

Nota: Ya valide que el nombre del formulario y los campos sean los correctos, pero aun asi no me arroja el alert cuando los dejo vacio.

[PHPeros]

Ahora estoy pensando en un código de 10 líneas y me hace gracia lo que te has complicado

[adryan310]

Umm podrias ayudarme a como solucionarlo a tu manera ?

[PHPeros]

Bueno, en vez de almacienar cientos de variables no se si sabrás que hay un array que se llama elements[] y que puedes hacer la misma condición if para todos los elementos del form con un bucle for. Ahora te pongo el ejemplo.

[adryan310]

Gracias amigo...!

Una duda... Los radiobutton y combobox son validados con esa funcion que dice ?

[PHPeros]

Todavía está en fase BETA xD

Código Javascript:

//obtenemos todos los elementos del form con etiqueta input
var elements = document.frmSearch.elements.getElementsByTagname('input');
//variable para comprobar los campos vacios
var errors = 0;
for(i=0; i<elements.length; i++){
//checkamos el valor
if(elements[i].value=="" || elements.value==" "){
//incrementamos errores si hace falta
++errors;
}else{
return true;
}
//despues de la salida del bucle hacemos 
if(errors==3){
// Alert y redireccion o lo que quieras
}
 

[adryan310]

Umm probare gracias !

[adryan310]

No me funciono amigo no me entra al alert !

[PHPeros]

oops, es getElementsByTagName()
Sustituye esa función a ver...

[adryan310]

lo tengo asi :

function quantityOfEmpty(){
//obtenemos todos los elementos del form con etiqueta input
var elements = document.frmSearch.elements.getElementsByTagName(' input');
//variable para comprobar los campos vacios
var errors = 0;
for(i=0; i<elements.length; i++){
//checkamos el valor
if(elements[i].value=="" || elements.value==""){
//incrementamos errores si hace falta
++errors;
}else
return true;
}
//despues de la salida del bucle hacemos
if(errors==5){
// Alert y redireccion o lo que quieras
alert('Debes digitar al menos');
return false;
}else
return true;
}

Y no me funciona !

[PHPeros]

:3 Como no sea el espacio en blanco del getElements...(' input').
Si no prueba a poner datos válidos y un alert en el "else" final. Si funciona es facil localizar el error.

[adryan310]

Alli no hay ningun espacio ya lo verifique y ya envie un alert en el else y nada!

[PHPeros]

Código javascript:

function validar(){
var elem = document.frmSearch.elements.getElementsByTagName('input');
var errors = 0; 
for(i=0; i<elem.length; i++){
if(elem[i].value=="" || elem[i].value==" "){
++errors;
}
}
if(errors>=5){
alert('Rellena todo!');
}else{
document.frmSearch.submit();
return true;
}
}
 

[adryan310]

Hola...

Debuguie el codigo y algo esta pasando en esta linea ya que cuando llega alli se cae la funcion:

var elem = document.frmSearch.elements.getElementsByTagName(' input');

[adryan310]

Hola a todos...

Tengo esta funcion donde se valida la cantidad de campos que quedaron vacios al intentar enviar el formulario:

Código PHP:

  function validar(){
var elem = document.frmSearch.elements.getElementsByTagName('input');
var errors = 0; 
for(i=0; i<elem.length; i++){
if(elem[i].value=="" || elem[i].value==" "){
++errors;
}
}
if(errors>=5){
alert('Rellena todo!');
}else{
document.frmSearch.submit();
return true;
}
} 
   

Luego en el form hago esto:

Código HTML:

<form id="frmSearch" name="frmSearch" action="" method="post" onsubmit="return quantityOfEmpty()">
   .
   .
   .
</form> 

Pero algo esta pasando por que el form siempre se envia...! Alguna ayudita por favor?

[adryan310]

oops sorry!

el form es este es q copie el viejo jeje:

Código HTML:

<form id="frmSearch" name="frmSearch" action="" method="post" onsubmit="return validar()">

   

</form> 

Pero aun asi no me funca !

[PHPeros]

Espera, voy a reirme un rato
Ok, son buenas noticias porque significa que el código funciona!
el frmSearch.submit() lo hice aposta para que si no hay errores lo enviara automáticamente... Ahora tu puedes poner la estructura que quieras pero en principio funciona. (Puedes quitar los returns)
Salu2! +1

[dAvidcA]

Hola adryan310, claro el código Javascript no tiene return false; en ningún lado, por lo tanto siempre enviará.

Antes del último } pon return false; o también puede ser en la siguiente línea luego del alert.

Código Javascript:

.   
    .
    .
    .
    return false;
}
 

Saludos.