validator-callback/bootstrap.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>callback validator - FormValidation</title>
        <meta charset="utf-8" />
        <meta content="width=device-width,initial-scale=1" name="viewport" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
        />
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="demoForm" method="POST">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label"><div id="captchaOperation"></div></label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="captcha" />
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-9 offset-sm-3">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>

        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function (e) {
                // Generate a simple captcha
                const randomNumber = function (min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                };
                const random = [randomNumber(1, 100), randomNumber(1, 200)];
                document.getElementById('captchaOperation').innerHTML = [random[0], '+', random[1], '='].join(' ');

                FormValidation.formValidation(document.getElementById('demoForm'), {
                    fields: {
                        captcha: {
                            validators: {
                                callback: {
                                    message: 'Wrong answer',
                                    callback: function (input) {
                                        const items = document.getElementById('captchaOperation').innerHTML.split(' ');
                                        const sum = parseInt(items[0]) + parseInt(items[2]);
                                        return input.value == sum;
                                    },
                                },
                            },
                        },
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        icon: new FormValidation.plugins.Icon({
                            valid: 'fa fa-check',
                            invalid: 'fa fa-times',
                            validating: 'fa fa-refresh',
                        }),
                    },
                });
            });
        </script>
    </body>
</html>