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