formulario de consulta con validacion en Javascript

Hola a todos,

Estoy tratando de crear un formulario que sea lo mas semantico posible y validar sus campos a traves de Javascript. Para ello estoy intentando utilizar manejadores de eventos semanticos tal y como explican en www.librosweb.es (Introduccion a Javascript - 6.2.2.4. Manejadores de eventos semánticos) pero no consigo hacerlo funcionar.

En lugar de analizarme todos los campos solo me examina hasta el alert ('Por favor, escriba su NOMBRE'); del campo1 que me esta fallando?

Aqui esta el codigo XHTML:

Código HTML :

<form method="post" action="index.php?sec=contacto" id="fConsulta" name="fConsulta">
   <label for="nombre">Nombre: </label>
      <input type="text" name="nombre" id="nombre" />
   <br class="clear" />
   <label for="telefono">Tel&eacute;fono: </label>
      <input type="text" name="telefono" id="telefono" />
   <br class="clear" />
   <input type="submit" name="enviar" id="enviar" value="Enviar"/>
   <br class="clear" />
</form>

y aqui mi codigo Javascript que se carga en la cabecera del index.php

Código Javascript :

function validarFormulario() {
   campo1 = document.getElementById("nombre");
   campo2 = document.getElementById("telefono");
   valor1 = campo1.value;
   valor2 = campo2.value;

   //campo1 (nombre)
   if (valor1==null || valor1.length==0 || /^\s+$/.test(valor1)) {
      alert ('Por favor, escriba su NOMBRE');
       ruta1.parentNode.style.background = "#FFDDDD";
      ruta1.focus();
      return false;
   } else {
      ruta1.parentNode.style.background = "transparent";
   }

   //campo2 (telefono)
   if (valor2==null || valor2.length!=9 || /^\d+$/.test(valor2)) {
      alert ('Por favor, escriba su numero de TELEFONO o MOVIL');
       ruta2.parentNode.style.background = "#FFDDDD";
      ruta2.focus();
      return false;
   } else {
      ruta2.parentNode.style.background = "transparent";
   }
}

window.onload = function(){
document.getElementById("enviar").onsubmit=validarFormulario;
}

No has definido que es "ruta1" por eso tu script se para ahí, obvio lo mismo pasa con "ruta2", debes definir ambos para que tu script continúe ejecutándose, me parece que en vez de ruta deberías poner campo1 y campo 2 respectivamente.

Ciertamente eso esta mal NeoCesar, pero sigue sin funcionar al cambiar ruta1 y ruta2 por campo1 y campo2...

he probado a alterar las acciones dentro de cada if de la forma siguiente:

Código Javascript :

  //campo1 (nombre) 
   if (valor1==null || valor1.length==0 || /^\s+$/.test(valor1)) { 
       campo1.parentNode.style.background = "#FFDDDD"; 
      campo1.focus();
      alert ('Por favor, escriba su NOMBRE'); 
      return false; 
   } else { 
      campo1.parentNode.style.background = "transparent"; 
   } 

Y observo que si me cambia el estilo y me da el foco en ese campo. Pero cuando pulso el boton aceptar de la ventana del alert, el formulario continua haciendo con el evento submit en lugar de detenerlo...

Hay alguna forma de detener el evento submit para que no envie el formulario y me recarge la pagina??

Si hay una más para asegurarte que el form no se ejecute coloca lo siguiente:

Código Javascript :

function validarFormulario(event) { // <- ojo se incluyo "event" entre los parentesis
   campo1 = document.getElementById("nombre"); 
   campo2 = document.getElementById("telefono"); 
   valor1 = campo1.value; 
   valor2 = campo2.value; 
 
   //campo1 (nombre) 
   if (valor1==null || valor1.length==0 || /^\s+$/.test(valor1)) { 
      event.preventDefault(); // <-- con esto evitas que el form se ejecute.
      alert ('Por favor, escriba su NOMBRE'); 
      campo1.parentNode.style.background = "#FFDDDD"; 
      campo1.focus(); 
      return false; 
   } else { 
      campo1.parentNode.style.background = "transparent"; 
   } 
 
   //campo2 (telefono) 
   if (valor2==null || valor2.length!=9 || /^\d+$/.test(valor2)) { 
      event.preventDefault(); // <-- con esto evitas que el form se ejecute.
      alert ('Por favor, escriba su numero de TELEFONO o MOVIL'); 
      campo2.parentNode.style.background = "#FFDDDD"; 
      campo2.focus(); 
      return false; 
   } else { 
      campo2.parentNode.style.background = "transparent"; 
   } 
} 
 
window.onload = function(){ 
document.getElementById("enviar").onsubmit=validarFormulario; 
} 

Gracias de nuevo NeoCesar por la respuesta, tendre en cuenta esa funcion para futuros usos^^

Pero para este caso encontre una solucion mas compatible con todos los navegadores modernos y antiguos. Se trata de asignar la funcion al elemento FORM del formulario en lugar de hacerlo al boton submit, la cosa es tan simple como esto:

Código Javascript :

window.onload = function(){  
document.getElementById("fConsulta").onsubmit=validarFormulario;  
}

Esto es así porque el evento onsubmit es solo aplicable al elemento FORM y no a los elementos que tenga en su interior, dicho de otra forma...estaba usando mal el evento^^U ...que cosas no? jeje ^^UUU