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>

在引导样式中显示自定义验证错误

1 个答案: