Hello,
I have a form that rely on google recaptcha invisible. In order to work, this captcha have to intercept the submit function of the button, do the validation, and submit the form if everything is OK.
The problem I encounter that the form use inline validation method with <div data-validate-for="myfield"></div>. With the code above, everything works well, but, in order to display the error if some required field are not filled, I have to use the this.success(data), without this, my <div data-validate-for="myfield"></div> are not filled.
But with the call to this.success(data), I encounter another problem, my validation error appears correctly, but all JS I call in data-request-success=“” is also triggered which is not the behavior I want. I don’t find what is the correct method to trigger validation, but not success methods.
Thank you for your help
var onloadCallback = function() {
var recaptchas = document.querySelectorAll('.g-recaptcha');
recaptchas.forEach(function(el) {
if(el.dataset.size == 'invisible') {
const form = el.closest('form');
const alias = form.dataset.request.split('::')[0];
grecaptcha.render(el, {
callback: function(token) {
oc.request(form, (alias+'::onFormSubmit'), {
error: function(data) {
resetReCaptcha(form);
this.success(data);
}
});
}
});
submitReCaptcha(form);
} else {
grecaptcha.render(el);
}
});
}
function resetReCaptcha(form) {
var el = form.querySelector('.g-recaptcha');
grecaptcha.reset(el);
}
function submitReCaptcha(form) {
const submit = form.querySelector('[type="submit"]');
const el = form.querySelector('.g-recaptcha');
if(submit) {
submit.addEventListener('click', function(e) {
e.preventDefault();
grecaptcha.execute(el);
});
}
}