Regenerating captcha when the form is invalid

In the following form, click the Submit button to see the new captcha is generated.
const captchaEle = document.getElementById('captchaOperation');
const generateCaptcha = function() {
const random = [randomNumber(1, 100), randomNumber(1, 200)];
captchaEle.innerHTML = [random[0], '+', random[1], '='].join(' ');
};
generateCaptcha();
FormValidation
.formValidation(
document.getElementById('demoForm'),
{
fields: {
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(input) {
const items = captchaEle.innerHTML.split(' ');
const sum = parseInt(items[0]) + parseInt(items[2]);
return input.value == sum;
}
}
}
}
},
plugins: {
submitButton: new FormValidation.plugins.SubmitButton(),
...
},
}
)
.on('core.form.invalid', function() {
// Regenerate captcha
generateCaptcha();
});
The example uses a very simple captcha generation which is a sum operation of two random numbers. In reality, it's recommended to use the popular Google's reCaptcha service
Regenerating captcha when the form is invalid