javascript - 以 Bootstrap 样式显示自定义验证错误

Question

我想在 boostrap 风格中显示输入错误。 bootstrap error但是当我使用这段代码时

let $emailContainer = $('[data-coffee-role="email-container"]');
$emailContainer.validate().showErrors({'email':'Email already exists'});

我在 this 中显示错误方式。我如何在 this 中显示我的错误怎么办？

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="example@gmail.com" 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);
        })
    }

Answer 1

我认为您搞砸了正在使用的外部库。您正在寻找的行为是一个简单的 HTML 表单验证，即使不使用 boostrap 也可以实现。

消息的图形方面取决于您使用的浏览器:

如果您想扩展默认消息文本或创建自定义验证器，这 page可以帮助你。

检查这个简单的例子:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
        <h1>Form validation demo</h1>
    </div>
    <form class="form">
    <div class="container">
        <div class="row">
            <div class='col-sm-4 form-group'>
                <label for="name">First Name:</label>
                <input id="fname" class="form-control" type="text" required>
            </div>
            <div class='col-sm-4 form-group'>
                <label for="name">Last Name:</label>
                <input id="lname" class="form-control" min="3" required>
            </div>
            <div class='col-sm-4 form-group'>
                <label for="name">Email address:</label>
                <input id="email" class="form-control" type="email" required>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <button type="submit" class="btn btn-success btn-block">Submit</button>
            </div>
        </div>
    </div>