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

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.