[SOLUCIONADO] Validar campos vacios en formulario con javascript una sola vez

[MissMonochrome]

Hola! Soy nueva tanto en el foro como en html, javascript y esas cosas. Vengo con una duda que quizas no sea nueva... Validar un formulario con javascript.
La mayoria de los ejemplos que he encontrado por internet lo que hacen es validar un campo a la vez. ¿Que quiero decir? Primero valida "nombre", si "nombre" esta vacio muestra un alert, despues de completarlo la validacion continua con el siguiente campo y repite lo mismo hasta que todos los campos esten llenos. Sin embargo lo que yo necesito es que la funcion compruebe todos los campos y arriba del formulario "liste" de alguna manera los campos vacios de una sola vez. Si bien lo hago algo rudimentario xD, los "return false" no me dejan continuar ya que el primer return false hace que el resto del codigo no se ejecute :/.

Código Javascript:

function Comprobar(formulario) 
{   
var nombreAp=document.getElementById('nombreApellido').value;
var eMail=document.getElementById('email').value;
var Asunto=document.getElementById('asunto').value;
var Mensaje=document.getElementById('mensaje').value;
if (nombreAp.length==0) 
{
var errorNombre=document.createElement('p');
errorNombre.innerHTML= 'No escribiste tu nombre';                   
document.getElementById("Comentarios").appendChild(errorNombre);
return false;
}
if (eMail.length==0) 
{
var erroremail=document.createElement('p');
erroremail.innerHTML='No escribiste tu email';
document.getElementById("Comentarios").appendChild(erroremail);
return false;
}
if (Asunto.length==0) 
{
var errorAsunto=document.createElement("p");
errorAsunto.innerHTML='No escribiste el asunto';            document.getElementById("Comentarios").appendChild(errorAsunto);
return false;
}
if (Mensaje.length==0) 
{   
var errorMensaje=document.createElement("p");
errorMensaje.innerHTML='No escribiste el mensaje';
document.getElementById("Comentarios").appendChild(errorMensaje);   
return false;
}
return true;
}
 

Mi duda es....¿Como puedo hacer para que siga la ejecucion?¿Hay alguna funcion parecida a return que detenga el envio del formulario pero deje a las demas lineas ejecutarse?

Codigo del formulario

Código HTML:

<div id="Comentarios"></div>
<form action="insertarDatos.php" method="post" id="formulario" name="formulario" onsubmit="return Comprobar();">
<h1>Contacto</h1>
<table align="center">
<tr>
td>Nombre y Apellido</td>
<td><input type="text" name="nombreApellido" id="nombreApellido"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>Asunto</td>
<td><input type="text" name="asunto" id="asunto"></td>
</tr>
<tr>
<td>Mensaje</td>
<td><textarea name="mensaje" id="mensaje"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Aceptar" id="Aceptar" name="Aceptar" onsubmit="return Comprobar();"></td>
</tr>
</table>
</form> 

[Alexis88]

Bienvenida a FDW

En lugar de hacerlo elemento por elemento, hazlo todo de una vez, al fin y al cabo, el proceso es el mismo.

Código Javascript:

var formulario = document.getElementById("id_formulario"),
    comodin = true;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
 
    var elementos = this.elements;
    for (var i in elementos){
        if (!elementos[i].value.length){
            alert("Debe de completar el campo " + elementos[i].name);
            comodin = false;
            break;
        }
    }
 
    if (comodin){
        this.submit();
    }
}, false);
 

Ahora la explicación. Primero, defino dos variables; la primera de ellas representa al formulario en cuestión al cual tomo por su id y la segunda es una variable que utilizaré como comodín para determinar si todos los campos del formulario se completaron o no y así enviar o no los datos del mismo para su procesamiento. Dicho comodín iniciará con el valor booleano true. Luego, con el método addEventListener, registro el evento submit, el cual es el que se ejecuta cuando enviamos los datos de un formulario a procesarse. Esto lo hago para ejecutar una función cuando esto se produzca.

Con el método preventDefault, prevengo que se ejecute dicho evento, lo cual me permitirá evaluar a cada elemento del formulario. Enseguida, tomo al conjunto de elementos del formulario y con ayuda de una estructura repetitiva (bucle), en este caso un for...in, los itero. En cada iteración, verifico la longitud del contenido de cada elemento; si ésta es falsa, es decir, si no hay contenido alguno en el elemento, muestro un mensaje de alerta en el cual le indico al usuario que debe de completar el campo cuyo nombre especifico al final de la línea, además, el valor del comodín cambiará a false y con la sentencia break, corto el flujo del bucle, saliendo del mismo puesto que al haberse detectado un elemento vacío, no deben de enviarse los datos para procesarse.

Finalmente, realizo la evaluación del comodín; si su valor es verdadero, que da igual colocar de cualquiera de las siguientes formas:

Código Javascript:

if (comodin == true) //Forma válida
if (comodin) //Forma válida
 

Entonces, quiere decir que todos los campos del formulario han sido completados, puesto que el valor del comodín solamente cambia cuando se detecta un campo vacío, por lo tanto, procedo a enviar los datos del formulario haciendo uso del método submit. Obviamente si el valor del comodín es falso, es decir, si se detectó algún elemento del formulario sin completar, no se realizará el envío de los datos. Antes de que me lo preguntes, la palabra reservada this, en este caso hace referencia al formulario al que estamos afectando.

Saludos

[MissMonochrome]

Alexis88 gracias por responder :)
He puesto el codigo pero no me funciona :/ lo manda directamente sin pasar por la funcion. He intentado forzar un poco para que lo ejecute pero al ejecutarlo no imprime ningun error.
Lo que necesito que haga es algo como esto:

[Alexis88]

¿Te aseguraste de que el id del formulario coincida con el que colocaste en el código?

Sería bueno que muestres la última implementación que hiciste para poder ayudarte. Por cierto, asegúrate de que el código JavaScript esté justo antes de la etiqueta </body> para que afecte al resto de elementos, no lo coloques en la cabecera, a menos que utilices una función que ejecute el código luego de la carga del DOM.

[MissMonochrome]

id iguales, codigo antes de <body> pero no en la cabecera. Nada...

Código Javascript:

</HEAD>
    <SCRIPT TYPE="text/javascript">
var formulario = document.getElementById("id_formulario"),
comodin = true;
 
formulario.addEventListener("submit", function(event){
event.preventDefault();
 
var elementos = this.elements;
for (var i in elementos){
if (!elementos[i].value.length){
alert("Debe de completar el campo " + elementos[i].name);
comodin = false;
break;
}
}
 
if (comodin){
this.submit();
}
}, false);
    </SCRIPT>
<body>
 

Código HTML:

<form action="insertarDatos.php" method="post" id="id_formulario" name="formulario">
<h1>Contacto</h1>
<table align="center">
<tr>
<td>Nombre y Apellido</td>
<td><input type="text" name="nombreApellido" id="nombreApellido"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>Asunto</td>
<td><input type="text" name="asunto" id="asunto"></td>
</tr>
<tr>
<td>Mensaje</td>
<td><textarea name="mensaje" id="mensaje"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Aceptar" id="Aceptar" name="Aceptar"></td>
</tr>
</table>
</form> 

De esta manera pasa directmente a subir el formulario ejecutando el "insertarDatos.php" que introduciria los campos en una base de datos.
Probe tambien como una funcion y llamandola desde el boton Aceptar pero lo que hace es no mostrarme los mensajes de que los campos estan vacios.

[Alexis88]

Creo que no leíste bien.

Iniciado por Alexis88

Por cierto, asegúrate de que el código JavaScript esté justo antes de la etiqueta </body>

Así como tienes el código, nunca afectará al formulario pues éste se carga después que el código. Realiza el cambio de posición del código JS y prueba. Ojo, <body> no es igual a </body>, con una indicas que inicia el cuerpo del documento, con la otra, indicas que finaliza el mismo.

Saludos

[MissMonochrome]

Me parecia extraño si xD....pero bueno arreglado...

Código Javascript:

<body>
    <SCRIPT TYPE="text/javascript">
    var formulario = document.getElementById("id_formulario"),
    comodin = true;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
 
    var elementos = this.elements;
    for (var i in elementos){
        if (!elementos[i].value.length){
            alert("Debe de completar el campo " + elementos[i].name);
            comodin = false;
            break;
        }
    }
 
    if (comodin){
        this.submit();
    }
}, false);
    </SCRIPT>
 

Aunque sigue sin funcionar :/

[Alexis88]

Imagino que el formulario estará antes que ese script, ¿verdad?

Edito: Hice un pequeño ejemplo para que veas cómo funciona. El único cambio que hice en el código JavaScript, fue utilizar un bucle for clásico (no el for...in). También cambié de posición inicial al comodín, ahora se encuentra dentro de la función, para que cuando se detecte algún campo vacío, en el siguiente intento, vuelva a tener por valor true.

Ejemplo
Código

Analízalo y en base a lo que veas, realiza las modificaciones necesarias.

Saludos

[MissMonochrome]

Cambiado de lugar y si funciona :D
Pero sigo teniendo el mismo problema que con el return false, solo me devuelve un solo error por vez. Quiero que al hacer la validacion valide todos los campos de una y vea cual esta vacio y cual no y arriba liste los campos que estan vacios, como esta en la imagen que puse en otro mensaje.

Código Javascript:

<SCRIPT TYPE="text/javascript">
var formulario = document.getElementById("id_formulario"),
comodin = true;
 
formulario.addEventListener("submit", function(event){
event.preventDefault();
 
var elementos = this.elements;
for (var i in elementos){
if (!elementos[i].value.length){
var txt="Debe de completar el campo " + elementos[i].name;
Comentarios.innerHTML=txt;
comodin = false;
break;
}
}
 
if (comodin){
this.submit();
}
}, false);
 

Cambie el alert para que lo muestre en la pagina y no en una ventana.

[Alexis88]

No quería hacerlo así, pero en ese caso, la estructura cambia un poquito.

Código Javascript:

var form = document.getElementById("miFormulario"),
    salida = document.getElementById("miSalida");
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    
    salida.innerHTML = "Tienes que completar los siguientes campos:";
  
    var comodin = true,
        elementos = this.elements,
        total = elementos.length;
  
    for (var i = 0; i < total; i++){
        if (!elementos[i].value.length){
            salida.innerHTML += "<br />- " + elementos[i].name;
            elementos[i].className = "falta";
            comodin = false;
        }
        else{
            elementos[i].className = null;
        }
    }
  
    if (comodin){
        this.submit();
    }
    else{
        salida.style.display = "block";
    }
}, false);
 

Siendo salida un elemento HTML, ya sea un <div>, un <p> o cualquier otro elemento de bloque, en el que se listarán los campos en donde no se ingresaron datos. La clase CSS falta le asigna un borde de color rojo al elemento en el que no se ingresó datos.

Ejemplo
Código

Saludos

[MissMonochrome]

Funciona! :D en el codigo que pusiste hay que cambiar innerText por innerHTML y ya comienza a mostrar los campos faltantes :D!
Muchisimas gracias!

[Alexis88]

Utilicé la propiedad innerText pues se trataba de texto simple, con innerHTML puedo introducir etiquetas HTML, por eso hice el cambio en la edición de mi respuesta, por los saltos de línea en la lista de elementos.

Revisa los enlaces, actualicé algunas cosas.

Saludos

[wilson_romero]

tan sencillo como

<input type="password" nametitle="se necesita un pass" required="required"="password" placeholder="pass" >
mas fácil

[Alexis88]

Wilson, recuerda que todavía hay muchos usuarios que ya sea por razones laborales u otras, utilizan navegadores que no dan soporte a HTML5. La validación que muestras es nativa de HTML5 y ahí radica la incompatibilidad. De cualquier modo, es una buena opción, pero lo más importante es validar del lado del servidor.

P. D.: Se recomienda no revivir hilos con más de 6 meses de antigüedad.

Un saludo

[aparrilla36]

Hola buenas tardes, estoy tratando de armar una función con una parte de este código, la cual estoy tratando de que se active con el evento onsubmit del form. La estoy referenciando desde un archivo externo en la cabezera del html, pero aun no logro que funcione.

De antemano gracias a quien pueda guiarme un poco...

Esto es lo que tengo:

HTML:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi pagina.com</title>
    <script type="text/javascript" src="http://mipagina.com/js/funciones.js"</script>
</head>
<body>
<form id="formulario" action="http://mipagina.com/registrar" method="POST" onsubmit="return campovacio(this.id)">
<input name="Nombre" type="text" maxlength="20" placeholder="Nombre" title="Ingrese su Nombre" />
<input name="Apellido" type="text" maxlength="20" placeholder="Apellido" title="Ingrese su Apellido"/>
<input type="submit" value="Enviar"></input>

</form>
</body>
</html>

La función en el archivo externo funciones.js

Código:

function campovacio (id) {
var form = document.getElementById(id);
      
      elementos = this.elements,
      total = elementos.length;
  
  for (var i = 0; i < total; i++){
    if (!elementos[i].value.length){
      if (elementos[i].placeholder===""){
      alert ("Debes de ingresar el " + elementos[i].name);
      elementos[i].focus();
      comodin = false;
      break;  
      }
      else {
      alert ("Debes de ingresar el " + elementos[i].placeholder);
      elementos[i].focus();
      comodin = false;
      break; }
    }
  }
  
  if (comodin){
    return true;
  }
  else {
    return false;
  }
}