0

llevo estudiando cerca de 2 semanas programacion web y javascript. En esta oportunidad estoy tratando de validar mi formulario en php, pero siempre que le doy enviar, no muestra los errores de validación y aparece la validación por defecto de html.

Este es mi Form

<form id='contact-form' role="form" action="bat/MailHandler.php" method="POST">
    <div class="contact-form-loader"></div>
    <fieldset>
        <div class="row">
            <div class="grid_4">
                <label class="name">
                    <input id="name" class="input" name="cf_name" type="text" placeholder="Ingrese su nombre" value="" required/>
                    <!--<span class="empty-message">*Este campo es requerido </span>
                    <span class="error-message">*El nombre no es valido.</span>-->
                </label>
            </div>
            <div class="grid_4">
                <label class="phone">
                    <input class="input" type="text" name="cf_phone" placeholder="Ingrese su Teléfono:" value=""/>
                    <!--<span class="error-message">*El número no es valido.</span>-->
                </label>
            </div>
            <div class="grid_4">
                <label class="email">
                    <input id="email" class="input" name="cf_email" type="text" placeholder="Ingrese su email" value="" required/>
                    <!--<span class="empty-message">*Este campo es requerido.</span>
                    <span class="error-message">*El correo no es valido.</span>-->
                </label>
            </div>
        </div>
        <label class="message">
            <textarea id="message" class="input" name="cf_message" placeholder="Ingrese su mensaje:" 
                      required minlength="5" maxlength="999999"></textarea>
            <!--<span class="empty-message">*Este campo es requerido.</span>
            <span class="error-message">*No se aceptan los siguientes caracteres: $, %, &, |. <, > y #.</span>
        </label>-->
        <input class="primary-btn_2" id="btn-enviar" type="submit" onclick="validate()" value="Enviar"/>    
        <a class="primary-btn_2" href="#" data-type="reset">Nuevo</a>
    </fieldset>
</form>

y este es mi js

<script>
    function validate{
        function email(){
            if(form.email.value == "") {
                alert("Ingresar un correo");
                form.email.focus();
                return false;
            }
            var re = /^[\w ]+$/;

            if(!re.test(form.email.value)) {
                alert("Formato de Correo invalido");
                form.email.focus();
                return false;
            }
            return true;
        }
        
        function name(){
            if(form.name.value == "") {
                alert("Ingrear un nombre");
                form.name.focus();
                return false;
            }
            
            return true;
        }               
            
        function msg{
            if(form.message.value == "") {
                alert("Ingrese su consulta");
                form.message.focus();
                return false;
            }
            
            if(!re.test(form.message.value)) {
                alert("Error, ingresar solo caracteres alfanumericos");
                form.message.focus();
                return false;
            }             

            return true;
        }
    }
</script>
<script>
    function validateEmail(){
        var emailID = document.form.email.value;
        atpos = emailID.indexOf("@");
        dotpos = emailID.lastIndexOf(".");
        
        if (atpos < 1 || ( dotpos - atpos < 2 )){
            alert("Por faor ingresar un formato de email valido")
            document.form.email.focus() ;
            return false;
        }
        
        return( true );
    }
</script>

         

Alguien me puede indicar que estoy haciendo mal?

2
  • ¿a qué refieres por "validación por defecto de html"?
    – Rene Limon
    el 13 ene. 2017 a las 19:45
  • A que simplemente aparece un mensaje diciendo "Completar campo" en vez de los mensajes personalizados.
    – Volt
    el 13 ene. 2017 a las 19:53

3 respuestas 3

0
  1. Ésto: function validate { te dará un Unexpected Token. Lo puedes comprobar en la consola de tu navegador.
  2. Ésto otro: document.form no sirve para obtener el formulario, lo correcto es document.forms que te devuelve un array con los formularios en el documento. Lo mejor es seleccionar el formulario por id o clase:

    document.getElementById('tuformid');
    
  3. La palabra reservada if debe ir con minúscula, debido a que JavaScript es sensible a mayúsculas. Tú has escrito:

    If(form.name.value == "")
    
  4. Utiliza siempre el operador de igualdad ===. Usar == te vuelve propenso a errores. Lee aquí para más información.

  5. No necesitas anidar funciones, haces tu código menos legible.

    function validate () { function email() { ... } }
    
  6. No necesitas usar dos tags <scripts>. Tu código tiene el mismo propósito.

  7. Si usas validación HTML5 para hacer un campo requerido, entonces validar lo mismo programáticamente es redundante.

Modificando un poco tu código, según lo el formato que tienes, quedaría así:

Nota: No se puede probar el código aquí por cuestiones de seguridad. Sin embargo, en éste fiddle puedes ver el código funcionando.

const form = document.getElementById('contact-form');

form.addEventListener('submit', function (e) {
  e.preventDefault();
  // si el form es válido, envía el formulario
  if(validator.validate()) {
    form.submit();
  }
});

const validator = {
  email() {
  	const exp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    
    if (!exp.test(form.email.value)) {
      alert("Formato de Correo invalido");
      form.email.focus();
      return false;
    }
    return true;
  },
  phone () {
    if(!/^[0-9]/.test(form.phone.value)) {
    	alert("Solo ingrese números en el teléfono");
    }
  },
  name() {
    if (!/^[a-zA-Z]+$/.test(form.name.value)) {
      alert("Ingrese solo letras en su nombre");
      form.name.focus();
      return false;
    }
    return true;
  },
  msg() {
  	if (!/^\w+$/.test(form.message.value)) {
      alert("Error, ingresar solo caracteres alfanumericos");
      form.message.focus();
      return false;
    }
    return true;
  },
  validate () {
  	if(!this.name() || !this.phone() || !this.email() || !this.msg()) {
    	return false;
    }
    return true;
  }
};
<body>
  <form action="http://stackoverflow.com" id='contact-form' method="post" name="contact-form" role="form">
    <div class="contact-form-loader"></div>
    <fieldset>
      <div class="row">
        <div class="grid_4">
          <label class="name">
            <input class="input" id="name" name="cf_name" placeholder="Ingrese su nombre" type="text" value="" required>
          </label>
        </div>
        <div class="grid_4">
          <label class="phone">
            <input class="input" name="cf_phone" placeholder="Ingrese su Teléfono:" type="text" value="" required>
          </label>
        </div>
        <div class="grid_4">
          <label class="email">
            <input class="input" id="email" name="cf_email" placeholder="Ingrese su email" type="text" value="" required>
          </label>
        </div>
      </div>
      <label class="message">
        <textarea class="input" id="message" maxlength="999999" name="cf_message" placeholder="Ingrese su mensaje:" required></textarea>
      </label>
       <input class="primary-btn_2" id="btn-enviar" type="submit" value="Enviar">
      <a class="primary-btn_2" data-type="reset" href="#">Nuevo</a>
    </fieldset>
    <label class="message"></label>
  </form>
</body>

3
  • Sobre el punto 6, a que te refieres con anidar funciones? Es mala practica?
    – Volt
    el 13 ene. 2017 a las 20:55
  • Punto 5 dirás. Los closures no son malos, es más cuestión de diseño, pero por norma general, los utilizas cuando quieres proveer objetos pero esconder su implementación.
    – gugadev
    el 13 ene. 2017 a las 21:03
  • Hola, @Jorge. ¿Resolviste tus dudas? Si es así, no olvides votar las respuestas que te ayudaron y marcar (con el check que aparece debajo de la votación) la respuesta que consideres correcta.
    – gugadev
    el 15 ene. 2017 a las 14:50
0

Si lo que deseas es que no aparezca la validación de html5, hay dos opciones:

  1. Utilizar novalidate:

          <form method="post" action="/foo" novalidate>...</form>
    
  2. No utilizar esas validaciones y captar todo desde js, por ejemplo:

    • required minlength
    • maxlength
    • required
7
  • Si, leyendo encontre esa opcion, pero igual sigue sin aparecer mis validaciones.
    – Volt
    el 13 ene. 2017 a las 20:05
  • entonces el problema es que tu función no se está llamando. ¿en donde llamas a la función validate? yo lo haria en el click del botón submit
    – Rene Limon
    el 13 ene. 2017 a las 20:09
  • lo edite y le puse el evento onclick="validate()". tambien use la opcion novalidate en mi form, sigue sin mostrarme algun error de validacion que he hecho.
    – Volt
    el 13 ene. 2017 a las 20:15
  • para comprobar si la función es llamada, imprime un simple alert sin condiciones.
    – Rene Limon
    el 13 ene. 2017 a las 20:20
  • Le puse un alert("Hola"); dentro de la funcion validate() y comente lo demas solamente dejando las llaves, pero no se dispara la alerta.
    – Volt
    el 13 ene. 2017 a las 20:29
0

En form debes poner:

onsubmit="return tufuncion()" 

De ese modo si la función retorna falso no se envía el formulario.

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.