0

quiero validar un campo de un formulario, con respecto a un captcha, pero quiero que conserve la validación HTML5, de forma paralela. Si hago la validación en el evento onclick del botón submit del formulario, anula la validación HTML5.

      <form action="../send" method="post" id="contact-form">


      
        <p>
          <label for="email" class="email">Email
            <span class="obligatorio">*</span>
          </label>
          <input type="email" name="email" id="email" required="obligatorio" placeholder="Escribe tu Email">
        </p>


      
        </p>
        <span class="small-text">
          Introduzca el captcha para continuar.
        </span>
        <div class="captchaSection">
       <p id="captcha">
       <div id="errCaptcha" class="errmsg"></div>
</p>
<a onclick="createCaptcha()"> <small  class="small-text"> Refrescar</small></a>

<input  required
name="reCaptcha"
          id="reCaptcha"
          placeholder="Type The Captcha">
</div>
        <p class="aviso">
          <span class="obligatorio"> * </span> campos obligatorios.
        </p>
       
       <button type="submit" name="submit" onclick="validateCaptcha()" id="enviar_formulario">
          <p>Enviar</p>
        </button>
      </form>

Y luego valido el botón submit con una función JS:

<script>
    function validateCaptcha() {
  event.preventDefault();
  const errCaptcha = document.getElementById("errCaptcha");
  const reCaptcha = document.getElementById("reCaptcha");
  const form = document.getElementById("contact-form");
  recaptcha = reCaptcha.value;
  let validateCaptcha = 0;
  for (var z = 0; z < 6; z++) {
    if (recaptcha.charAt(z) != captcha[z]) {
      validateCaptcha++;
    }
  }
  if (recaptcha == "") {
    errCaptcha.innerHTML = "Re-Captcha must be filled";
  } else if (validateCaptcha > 0 || recaptcha.length > 6) {
    errCaptcha.innerHTML = "Wrong captcha";
  } else {
    this.submit()
  }
}

let captcha = new Array();

function createCaptcha() {
  const activeCaptcha = document.getElementById("captcha");
  for (q = 0; q < 6; q++) {
    if (q % 2 == 0) {
      captcha[q] = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
    } else {
      captcha[q] = Math.floor(Math.random() * 10 + 0);
    }
  }
  theCaptcha = captcha.join("");
  activeCaptcha.innerHTML = `${theCaptcha}`;
}
createCaptcha();
</script>

Las dudas son:

  1. Se puede mantener la validación tipo de html5, y crear una función personalizada para, en este caso, validar el captcha.

  2. Una vez que el captcha es correcto como sigo con el envío del formulario, this.submit(), no funciona.

Gracias.

1 respuesta 1

0

this.submit() No te funciona, porque en ese contexto 'this' no es el form. Puedes hacer window.form['contact-form'].submit(), siendo 'contact-form' la id del form.

Por otro lado, tampoco es necesario. El evento onclick se ejecuta antes del submit y si retorna false el submit no se genera. Entonces debes hacer que tu función validateCaptcha retorne un booleano

function validateCaptcha() {

  const errCaptcha = document.getElementById("errCaptcha");
  const reCaptcha = document.getElementById("reCaptcha");
  const form = document.getElementById("contact-form");
  recaptcha = reCaptcha.value;
  let validateCaptcha = 0;
  for (var z = 0; z < 6; z++) {
    if (recaptcha.charAt(z) != captcha[z]) {
      validateCaptcha++;
    }
  }
  if (recaptcha == "") {
    errCaptcha.innerHTML = "Re-Captcha must be filled";
    return false;
  } 
  else if (validateCaptcha > 0 || recaptcha.length > 6) 
  {
    errCaptcha.innerHTML = "Wrong captcha";
    return false;
  } 
   else {
    return true;
  }
}

Y tú botón submit

<button type="submit" name="submit" onclick="return validateCaptcha()" id="enviar_formulario">
 <p>Enviar</p>
</button>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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