淘汰赛未显示错误消息范围答案

【问题标题】：knockout is not showing error message span淘汰赛未显示错误消息范围
【发布时间】：2013-06-23 09:05:03
【问题描述】：

我正在使用淘汰赛验证，这是我的模型的样子

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable('').extend({
        required: true,
        pattern: {
            message: 'Username must be a valid email address',
            params: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        }
    });
    self.password = ko.observable('').extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {

            $.post("/account/jsonlogin", { userName: self.userName(), password: self.password(), returnUrl: "/" })
                .done(function (result) {
                    redirect(result.redirect);
                }).error(function () {

                });
        } else {

            self.errors.showAllMessages();
        }
    }

}
ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'error'
});
$(function () {
    ko.applyBindings(new SignInViewModel());
});

当我在userName 中输入一个无效的电子邮件地址并通过单击我的提交按钮调用登录时，敲除会在元素旁边附加一个错误消息跨度，但它被设置为不显示。有什么问题。

谢谢

【问题讨论】：

标签： knockout.js knockout-2.0 knockout-validation

【解决方案1】：

你能用这个小提琴重现你的问题吗：

http://jsfiddle.net/jearles/hRa2h/

这对我有用。您会立即看到错误计数为 2，然后按“登录”将显示错误。键入无效的电子邮件会显示电子邮件。

====

HTML

<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>User name: <input data-bind='value: userName'/></label><br/>
    <label>Password: <input data-bind='value: password' type="password"/></label>

</fieldset>
<button type="button" data-bind='click: login'>Login</button>

ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'error',
    messagesOnModified: false    
});

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable().extend({
        required: true,
        pattern: {
            message: 'Username must be a valid email address',
            params: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        }
    });
    self.password = ko.observable().extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {
            alert('No errors');
        } else {

            self.errors.showAllMessages(true);
        }
    }

}
$(function () {
    ko.applyBindings(new SignInViewModel());
});

【讨论】：

@Jhon Earles 我认为我正在使用引导程序，使用引导程序时我们应该做些什么不同的事情吗？
否... Bootstrap 应该没有影响。我们在我的办公室同时使用 Bootstrap、Knockout 和 Knockout Validation。我已经用 Bootstrap 更新了我的小提琴。
实际上问题出在引导程序上，正如我所想的那样，引导程序中有一个类.input-append, .input-prepend 他们设置了font-size:0，这是造成问题

【解决方案2】：

问题是由于 bootstrap ，因为 bootstrap 有一个类

.input-append, .input-prepend {
   margin-bottom: 5px;
   font-size: 0;
    white-space: nowrap;
 }

这个font-size:0 正在制造问题。淘汰赛按预期工作正常。

【讨论】：

【解决方案3】：

从您的代码中删除 ''

self.userName = ko.observable('').extend({

在您的代码中

上面的行应该更像这样：

self.userName = ko.observable().extend({

错误信息将显示在 span 标签中。

【讨论】：