formulario de consulta con validacion en Javascript

[noctam]

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 [URL="http://www.librosweb.es/javascript/capitulo6/modelo_basico_de_eventos1.html"]www.librosweb.es (Introduccion a Javascript - 6.2.2.4. Manejadores de eventos semánticos)[/URL] 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; 
}
 

[Adler]

Hola

Prueba así

Código Javascript:

var patron=new RegExp(/^\s+|\s+$/);
...
if (valor1==null || valor1.length==0 || patron.test(valor1)) {
 

Suerte

[noctam]

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??

[zerokilled]

la funcion de validacion la estas agregando al boton submit, debe ser al elemento FORM.

[noctam]

¿?

zerokilled, eso que has dicho de agregarlo al elemento form me ha dejao un poco pillao...

puedes escribir el codigo para echarle un vistazo? no me imagino como puede ser

[zerokilled]

lo mismo como estas haciendo con el INPUT submit en el evento onload. pero en lugar del INPUT submit, obtienes la referencia del FORM por su ID, NAME, document.forms.

[noctam]

ya veo, gracias zerokilled por las respuestas. Entonces el codigo se quedaria así:

Código Javascript:

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

Al parecer el evento onsubmit solo se puede asociar al elemento FORM y no la los elementos que tenga en su interior^^