-1

Soy principiante con JS y estoy aprendiendo a validar formularios de contacto.

Este es el código que tengo.

Según el tutorial que estaba realizando, a la hora de rellenar los campos si hay algún error me debería saltar una alerta en estos casos: cuando en el campo de email coloco un email invalido, debería saltarme el mensaje que diga que el email es inválido, o cuando en el campo nombre , coloco números debería saltar el mensaje que diga que el campo solo acepta letras y espacios, o cuando simplemente no coloca nada en campo y presiono enviar debería decirme: "el campo xxxxxx es requerido".

Debería funcionar, ya he reescrito varias veces el ejercicio y no realiza las funciones.

function validarForm(){
    
var verificar = true;

  var expRegNombre=/^[a-zA-ZÑñÁáÉéÍíÓóÚúÜü\s]+$/;
  var expRegApellidos=/^[a-zA-ZÑñÁáÉéÍíÓóÚúÜü\s]+$/;
var expRegCorreo=/^[\w-\.]+@([\w-])+\.)+[\w-]{2,4}$/; 


     var formulario = document.getElementById("contacto-frm");
     var nombre = document.getElementById("nombre");
     var apellidos = document.getElementById("apellidos");
     var correo = document.getElementById("correo");
     var asunto = document.getElementById("asunto");
     var comentarios = document.getElementById("comentarios");
//Campo nombre
     if(!nombre.value)
     {
      alert("El campo nombre es requerido");
      nombre.focus();
      verificar==false;
     }
     else if (!expRegNombre.exec(nombre.value))
     {
        alert("El campo nombre admite letras y espacios.")
        nombre.focus();
        verificar=false;

     }
//CAmpo apellido

      else if(!apellidos.value)
     {
      alert("El campo apellidos es requerido");
      apellidos.focus();
      verificar=false;
     }
     else if(!expRegApellidos.exec(apellidos.value))
     {
       alert("El campo apellidos admite letras y espacios.")
       apellidos.focus();
       verificar=false;
     }


//campo email
      else if(!correo.value)
     {
      alert("El campo correo es requerido");
      correo.focus();
      verificar=false;
     }
     else if(!expRegCorreo.exec(correo.value))
     {
       alert("El campo nombre admite letras y espacios.")
       correo.focus();
       verificar=false;
     }
// campo asunto
       else if(!asunto.value)
     {
      alert("El campo asunto es requerido");
      nombre.focus();
      verificar=false;
     }
//campo comentarios
      else if(!comentarios.value)
     {
      alert("El campo comentarios es requerido");
      comentarios.focus();
      verificar=false;
     }

    if(verificar)
    {
      alert("Se ha enviado el formulario");
     document.contacto_frm.submit();
    }



alert("Enviando");
 document.contacto_frm.submit();

  }
  // asociacion del boton enviar con el formulario en html//
  window.onload = function()
  { 
    var botonEnviar;
    botonEnviar = document.contacto_frm.enviar_btn;
    botonEnviar.onclick = validarForm;
  }
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Contacto</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimun-scale=1">
	<link rel="stylesheet" href="css/fontello.css">
	<link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="js/contacto.js"></script>
</head>
<body>
     <header>
     	<div class="contenedor">
     		<h1 class="icon-food">My Restaurant</h1>
     		<input type="checkbox" id="menu-bar">
     		<label class="icon-menu" for="menu-bar"></label>
     		<nav class="menu">
     			<a href="index.html">Inicio </a>
                <a href="galeria.html">Galeria</a>
                <a href="platos.html">Platos</a>
                <a href="eventos_especiales.html">Eventos Especiales</a>
                <a href="Registrologin.html">Registro y Login</a>
                <a href="Delivery.html">Delivery</a>
                <a href="Nosotros.html">About us</a>
                <a href="Contacto.html">Contacto</a>
     	</div>          
     </header>
     
     <form action="" id="contacto-frm" class="formulario" name="contacto_frm">
         <fieldset>
         <legend align="center">Contacto</legend> 
         <label for="" class="formulario__label" >Nombres</label>
         <input type="text" id= "nombre" class="formulario__input">       
         <label for="" class="formulario__label">Apellidos</label>
         <input type="text" class="formulario__input" id= "apellidos">
         <label for="" class="formulario__label">Correo</label>
         <input type="text" class="formulario__input" id= "Correo">
         <label for="" class="formulario__label">Asunto</label>
         <input type="text" class="formulario__input" id="asunto">
        <textarea type="text" id="comentarios" cols="50" rows="5" class="formulario__input" placeholder="Comentarios"></textarea>         
         <input type="submit" class="formulario__submit" id="enviar" name="enviar_btn" >
         <br> <br>
       
         </fieldset>
     </form>
     <div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15691.725841632386!2d-66.9146096!3d10.5060647!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb48528e44557cdb8!2sPlaza+Bol%C3%ADvar!5e0!3m2!1ses!2sve!4v1491966695607" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

     <footer>
          <div class="contenedor">
            <p class="copy">My restaurant &copy; 2017</p>
            <div class="sociales">
              <ul>
                 <a class="icon-facebook" href="#"></a>
                 <a class="icon-twitter" href="#"></a>
                 <a class="icon-instagram" href="#"></a>
                 <a class="icon-youtube" href="#"></a>
              </ul>                    
            </div>    
          </div>
     </footer>
</body>
</html>

8
  • Angel , podrías añadir la estructura de su HTML
    – Dev. Joel
    el 28 abr. 2017 a las 2:23
  • 1
    Además, ¿Ves las alertas? ¿Hay algún error en consola?
    – gugadev
    el 28 abr. 2017 a las 2:27
  • 1
    ... y en qué falla?? "debería funcionar" es una muy mala descripción del problema. ¿Qué es específicamente lo que no funciona? ¿Con qué valores estás intentando? ¿Falla la validación pero se envía el form, o ni siquiera se asocia correctamente el evento?
    – Mariano
    el 28 abr. 2017 a las 2:48
  • listo, trate de describir un poco mejor el problema y ademas añadí el html
    – AngeRodrgz
    el 28 abr. 2017 a las 3:10
  • El mal funcionamiento es que está mal construida su Regex para Email , si comenta la variable expRegCorreo funciona. quizá sea conveniente leer es.stackoverflow.com/questions/142/… para realizar una validación más genérica.
    – Dev. Joel
    el 28 abr. 2017 a las 4:37

2 respuestas 2

1

Como comentaba antes hay bastantes errores. Mira este ejemplo.

He modificado la expresión regular para el correo que no era correcta. He asociado la función de validación al evento submit del formulario. En la función de validación simplemente se devuelve false cuando la validación no es correcta lo que provoca la cancelación del evento. Si es correcta devuelve true lo que provoca que se envíe el formulario. He cambiado el selector del elemento correo que en el código aparecía con c minúscula cuando en el html aparecía con mayúscula. También he cambiado algún mensaje de validación y establecer el foco en el control correcto después de validar el campo asunto.

function validarForm(){

  var expRegNombre=/^[a-zA-ZÑñÁáÉéÍíÓóÚúÜü\s]+$/;
  var expRegApellidos=/^[a-zA-ZÑñÁáÉéÍíÓóÚúÜü\s]+$/;
  var expRegCorreo=/^\w+@(\w+\.)+\w{2,4}$/; 


     var nombre = document.getElementById("nombre");
     var apellidos = document.getElementById("apellidos");
     var correo = document.getElementById("Correo");
     var asunto = document.getElementById("asunto");
     var comentarios = document.getElementById("comentarios");
     //Campo nombre
     if(!nombre.value)
     {
      alert("El campo nombre es requerido");
      nombre.focus();
      return false;
     }
     if (!expRegNombre.exec(nombre.value))
     {
        alert("El campo nombre admite letras y espacios.")
        nombre.focus();
        return false;
     }
     //Campo apellido
     if(!apellidos.value)
     {
      alert("El campo apellidos es requerido");
      apellidos.focus();
      return false;
     }
     if(!expRegApellidos.exec(apellidos.value))
     {
       alert("El campo apellidos admite letras y espacios.")
       apellidos.focus();
       return false;
     }


     //campo email
     if(!correo.value)
     {
      alert("El campo correo es requerido");
      correo.focus();
      return false;
     }
     if(!expRegCorreo.exec(correo.value))
     {
       alert("El campo correo no tiene el formato correcto.")
       correo.focus();
       return false;
     }
     // campo asunto
     if(!asunto.value)
     {
      alert("El campo asunto es requerido");
      asunto.focus();
      return false;
     }
     //campo comentarios
     if(!comentarios.value)
     {
      alert("El campo comentarios es requerido");
      comentarios.focus();
      return false;
     }

     return true;
  }
  // asociacion del boton enviar con el formulario en html//
  window.onload = function()
  { 
    var formulario = document.getElementById("contacto-frm");
    formulario.onsubmit = validarForm;
  }
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Contacto</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimun-scale=1">
	<link rel="stylesheet" href="css/fontello.css">
	<link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="js/contacto.js"></script>
</head>
<body>
     <header>
     	<div class="contenedor">
     		<h1 class="icon-food">My Restaurant</h1>
     		<input type="checkbox" id="menu-bar">
     		<label class="icon-menu" for="menu-bar"></label>
     		<nav class="menu">
     			<a href="index.html">Inicio </a>
                <a href="galeria.html">Galeria</a>
                <a href="platos.html">Platos</a>
                <a href="eventos_especiales.html">Eventos Especiales</a>
                <a href="Registrologin.html">Registro y Login</a>
                <a href="Delivery.html">Delivery</a>
                <a href="Nosotros.html">About us</a>
                <a href="Contacto.html">Contacto</a>
     	</div>          
     </header>
     
     <form action="" id="contacto-frm" class="formulario" name="contacto_frm">
         <fieldset>
         <legend align="center">Contacto</legend> 
         <label for="" class="formulario__label" >Nombres</label>
         <input type="text" id= "nombre" class="formulario__input">       
         <label for="" class="formulario__label">Apellidos</label>
         <input type="text" class="formulario__input" id= "apellidos">
         <label for="" class="formulario__label">Correo</label>
         <input type="text" class="formulario__input" id= "Correo">
         <label for="" class="formulario__label">Asunto</label>
         <input type="text" class="formulario__input" id="asunto">
        <textarea type="text" id="comentarios" cols="50" rows="5" class="formulario__input" placeholder="Comentarios"></textarea>         
         <input type="submit" class="formulario__submit" id="enviar" name="enviar_btn" >
         <br> <br>
       
         </fieldset>
     </form>
     <div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15691.725841632386!2d-66.9146096!3d10.5060647!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb48528e44557cdb8!2sPlaza+Bol%C3%ADvar!5e0!3m2!1ses!2sve!4v1491966695607" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

     <footer>
          <div class="contenedor">
            <p class="copy">My restaurant &copy; 2017</p>
            <div class="sociales">
              <ul>
                 <a class="icon-facebook" href="#"></a>
                 <a class="icon-twitter" href="#"></a>
                 <a class="icon-instagram" href="#"></a>
                 <a class="icon-youtube" href="#"></a>
              </ul>                    
            </div>    
          </div>
     </footer>
</body>
</html>

0

Los navegadores soportan una sentencia llamada debugger que detiene el código para depurarlo mientras corriges cambios o más. Revisando tu código, se encuentran este error.

En lo personal prefiero manejar una librería JavaScript como jQuery o ReactJS (u otras) para reducir código y tiempo en el desarrollo.

Espero te sirva de algo.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.