core.form.invalid event

Triggered when the form is completely validated, and all fields are invalid

Example: 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();
    });

Tip

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