Validación de formulario no funciona con onsubmit

Salud compañeros!!!

Tengo el siguiente problema: Estoy realizando una validación con javascript de ingreso de eMail y Password. El caso es que después de mucho probar para validar el correo logré hacerlo de la siguiente forma para que funcione:

Código HTML :

<!--El script-->
<script type="text/javascript" language="javascript">
function ValMail(valor) {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(valor)){
   return (true)
} else {alert("Por favor, ingrese un eMail válido.");
return (false);
}
}
</script>

<!--El formulario-->
<form id="reg" name="registro" method="post" action="registro.php">
<input id="correo" type="text" name="correo" style="width: 424px" onblur="ValMail(this.value);"/>
<input id="enviar" type="submit" value="enviar"/>
</form>

Diseñado de esta forma funciona y hace lo que tiene que hacer, es decir, validar el correo. El problema surge cuando quiero que, a parte, me valide dos campos para ingresar el password. Esto lo tenía en otra página de la siguiente forma:

Código HTML :

<!--El script-->
<script type="text/javascript">
function ValPass () {
   var p1 = document.getElementById("pass").value;
   var p2 = document.getElementById("cpass").value;
   var espacios = false;
   var cont = 0;
      while (!espacios && (cont < p1.length)) {                  
         if (p1.charAt(cont) == " ")                          
            espacios = true;                  
         cont++;
      }
   if (espacios) {
      alert ("Su Password no debe poseer espacios en blanco.");     
      return false;
      }
   if (p1.length == 0 || p2.length == 0) {
      alert("Por favor, ingrese su Password en ambas casillas.");
      return false;
      }
   if (p1 != p2) {
      alert("Los passwords deben de coincidir");
      return false;
      } else {
      return true;
   }
}
</script>

<!--El formulario-->
<form id="reg" name="registro" method="post" onsubmit="return ValMail(); ValPass()" action="registro.php">
<input id="pass" type="password" name="pass" style="width: 424px" />
<input id="cpass" type="password" name="cpass" style="width: 424px" />
<input id="enviar" type="submit" value="enviar"/>
</form>

Este formulario también funciona. Pues bien, con toda mi inocencia me dije: Si funcionan por separado deberían funcionar juntos y la verdad es que no. Lo que hice fue unir ambas funciones:

Código HTML :

<!--El script-->
<script type="text/javascript">
function ValMail(valor) {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(valor)){
   return (true)
} else {alert("Por favor, ingrese un eMail válido.");
return (false);
}
}

function ValPass () {
   var p1 = document.getElementById("pass").value;
   var p2 = document.getElementById("cpass").value;
   var espacios = false;
   var cont = 0;
      while (!espacios && (cont < p1.length)) {                  
         if (p1.charAt(cont) == " ")                          
            espacios = true;                  
         cont++;
      }
   if (espacios) {
      alert ("Su Password no debe poseer espacios en blanco.");     
      return false;
      }
   if (p1.length == 0 || p2.length == 0) {
      alert("Por favor, ingrese su Password en ambas casillas.");
      return false;
      }
   if (p1 != p2) {
      alert("Los passwords deben de coincidir");
      return false;
      } else {
      return true;
   }
}
</script>

<!--El formulario-->
<form id="reg" name="registro" method="post" onsubmit="return ValMail(); ValPass()" action="registro.php">
<input id="correo" type="text" name="correo" style="width: 424px" />
<input id="pass" type="password" name="pass" style="width: 424px" />
<input id="cpass" type="password" name="cpass" style="width: 424px" />
<input id="enviar" type="submit" value="enviar"/>
</form>

Pero no anda. Haga lo que haga, lo deje en blanco, escriba lo que escriba, siempre me dice "Por favor, ingrese un eMail válido." y no avanza a la segunda función. He probado llamar en el onsubmit sólo la función ValPass y valida pero obviamente se salta el correo. Si sólo llamo a ValMail me sigue diciendo que el correo es inválido. Entiendo que en el primer ejemplo uso onblur="ValMail(this.value) ya que fue la única forma de que me funcionara la validación del correo (de hecho, encontré la solución aquí en Cristalab). Lo del Pass me funciona sí o sí tal como está a través de onsubmit (ya no recuerdo dónde encontré ese script que también después de mucho buscar sí me funcionó)

Bueno, eso es. ¿Alguna idea de por qué la validación del correo no funciona con onsubmit cuando quiero validar los tres campos? Sé que la consulta es un poco extensa, pero es la única forma de que quede claro el problema.

De antemano muchas gracias a toda la comunidad. Saludos.

Eh, bueno, es que la función ValMail() necesita un parámetro para funcionar y tú no le estás pasando ninguno. Además necesitas organizar mejor el código. Mi sugerencia es que en el evento onSubmit llames a una función que ejecute las otras dos:

Código HTML :

<html>
<head>
<script type="text/javascript"> 
function ValMail(valor) { 
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(valor)){ 
   return (true) 
} else {alert("Por favor, ingrese un eMail válido."); 
return (false); 
} 
} 
 
function ValPass () { 
   var p1 = document.getElementById("pass").value; 
   var p2 = document.getElementById("cpass").value; 
   var espacios = false; 
   var cont = 0; 
      while (!espacios && (cont < p1.length)) {                   
         if (p1.charAt(cont) == " ")                           
            espacios = true;                   
         cont++; 
      } 
   if (espacios) { 
      alert ("Su Password no debe poseer espacios en blanco.");      
      return false; 
      } 
   if (p1.length == 0 || p2.length == 0) { 
      alert("Por favor, ingrese su Password en ambas casillas."); 
      return false; 
      } 
   if (p1 != p2) { 
      alert("Los passwords deben de coincidir"); 
      return false; 
      } else { 
      return true; 
   } 
} 

function Validar(frm) {
   return ValMail(frm.correo.value) && ValPass();
}

</script> 
</head>
 <body>
<!--El formulario--> 
<form id="reg" name="registro" method="post" onsubmit="return Validar(this);" action="registro.php"> 
<input id="correo" type="text" name="correo" style="width: 424px" /> 
<input id="pass" type="password" name="pass" style="width: 424px" /> 
<input id="cpass" type="password" name="cpass" style="width: 424px" /> 
<input id="enviar" type="submit" value="enviar"/> 
</form>
</body> 
</html>

¡Wow! Había intentado hacer algo parecido pero no me había resultado. Mil gracias. Asunto solucionado.


Mil gracias por todo DriverOp. Ahora iré por la validación del mismo formulario pero en php... Me estoy convirtiendo en un dolor de cabeza ¿no? A todo esto, gracias por la función que me dejaste en el otro post. Intentaré ahora aplicarla en mi script php, así que ahora vuelvo a cambiarme de sección.


Lo bueno es que cada vez voy comprendiendo mejor la estructura de ambos lenguajes. Jajajajaja...