以引导程序样式显示自定义验证错误

Question

我想以 boostrap 的风格显示输入错误。 引导程序错误 但是当我使用此代码时

let $emailContainer = $('[data-coffee-role="email-container"]');

$emailContainer.validate().showErrors({'email':'Email already exists'});

我以这种方式显示错误。我如何以这种方式显示我的错误？

html

 <div class="card">

        <div class="card-body">

            <form data-coffee-order="coffee">

                <div class="form-group">

                    <label for="coffeeOrder">Coffee order</label>

                    <input id="coffeeOrder" type="text" class="form-control" name="coffee" autofocus required>

                </div>

                <div class="form-group" data-coffee-role="email-container">

                    <label for="email">Email</label>

                    <input id="email" type="email" class="form-control" name="email" placeholder="[e-mail]" required>

                </div>

                <button type="submit" class="btn btn-outline-secondary">Submit</button>

                <button type="reset" class="btn btn-outline-secondary">Reset</button>

            </form>

        </div>

    </div>

JS

 FormHandler.prototype.addHandler = function(fn, check){

        this.$formElement.on('submit', function (event) {

            event.preventDefault();

            const data = {};

            $(this).serializeArray().forEach(item => data[item.name] = item.value);

            if(check(data.email)){

                let $emailContainer = $('[data-coffee-role="email-container"]');

                $emailContainer.validate().showErrors({'email':'Email already exists'});

                return;

            }

            fn(data);

        })

    }