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