0

La verdad es que se muy poco de javascript y tengo serios problemas para validar un formulario con bootsrap JS y recaptacha3.

Si valido los inputs con boostrap por aparte, no me da lio hace su tarea como debe y lo mismo pasa cuando valido recaptcha por aparte.

La idea es que primero me valide los inputs con el js de bootrsap, y si todo anda bien proceda a revisar el recaptcha y hacer el envio del formulario.

Este es mi formulario:

<form id="regiration_form"  class="needs-validation" novalidate  enctype="multipart/form-data" method="post">

Ahora, con este código valido los inputs con bootstrap

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
          swal({
        title: "Atención!",
        html: "Su solicitud no será enviada, hasta que se completen todos los campos obligatorios, por favor valide y vuelva a intentarlo. ",
        confirmButtonColor: "#053051",
        type: "warning"
        });
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

Y con este otro ejecutó la validación y envió con recaptcha

$('#regiration_form').submit(function(event) {
        event.preventDefault();
        
        grecaptcha.ready(function() {
            grecaptcha.execute('<?php echo RECAPTCHA_V3_SITE_KEY;?>', {action: 'registro'}).then(function(token) {
                $('#regiration_form').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#regiration_form').prepend('<input type="hidden" name="action" value="registro">');
                $('#regiration_form').unbind('submit').submit();
            });;
        });
  });

Como lo mencioné tengo problemas para que primero me valide y luego si todo va bien proceda al envio del formulario del recaptcha

Si lo ejecuto así tal cual esta, me muestra el mensaje de que efectivamente faltan inputs por llenar, pero a su vez hace el envió del formulario.

En mi poco conocimiento acerca de JS trate de fusionar ambos códigos haciendo esto:

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
          swal({
        title: "Atención!",
        html: "Su solicitud no será enviada, hasta que se completen todos los campos obligatorios, por favor valide y vuelva a intentarlo. ",
        confirmButtonColor: "#053051",
        type: "warning"
        });
        }
        form.classList.add('was-validated');
//Recaptcha
$('#regiration_form').submit(function(event) {
        event.preventDefault();
        
        grecaptcha.ready(function() {
            grecaptcha.execute('<?php echo RECAPTCHA_V3_SITE_KEY;?>', {action: 'registro'}).then(function(token) {
                $('#regiration_form').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#regiration_form').prepend('<input type="hidden" name="action" value="registro">');
                $('#regiration_form').unbind('submit').submit();
            });;
        });
  });


      }, false);
    });
  }, false);
})();

claramente no me funciono, si hace la validación si hay campos vacios, pero si todo esta lleno al enviarlo me aparece que hacen falta las variables de token y action que son los campos ocultos del código que me valida el recaptcha

Si alguien por favor me puede explicar en que esta fallando mi pobre lógica, les agradezco

1 respuesta 1

0

estas lanzando los dos metodos con el evento submit eso hace que se ejecuten al mismo tiempo por eso te hace validación y el envio como js el asicrono esto es posible. deberias lanzar esta parte despues de la validacion de los inputs.

$('#regiration_form').submit(function(event) {
    event.preventDefault();
    
    grecaptcha.ready(function() {
        grecaptcha.execute('<?php echo RECAPTCHA_V3_SITE_KEY;?>', {action: 'registro'}).then(function(token) {
            $('#regiration_form').prepend('<input type="hidden" name="token" value="' + token + '">');
            $('#regiration_form').prepend('<input type="hidden" name="action" value="registro">');
            $('#regiration_form').unbind('submit').submit();
        });;
    });
});

añade un else en este if y lanzalo

    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
      swal({
    title: "Atención!",
    html: "Su solicitud no será enviada, hasta que se completen todos los campos obligatorios, por favor valide y vuelva a intentarlo. ",
    confirmButtonColor: "#053051",
    type: "warning"
    });
    }

Tu Respuesta

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

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