Question

我正试图通过一个文本框和一个选择字段以小型形式进行淘汰验证。

jsfiddle的行为与我的不一样。我得到了选择列表的验证，但没有得到文本框的验证。小提琴没有给出任何验证（但报告isValid()是真的）。

我不是一个javascript大师，可能做错了什么。这里有一个小提琴：http://jsfiddle.net/DzrqK/。真正的页面是在一个bootstrap模态中加载模型，但是我已经把它去掉了小提琴。

HTML：

<div class="modal hide fade in" id="AddApplicationDialog" style="display: block;" aria-hidden="false">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" data-bind="click: Cancel">×</button>
        <h3>Add aplication</h3>
    </div>
    <div class="modal-body">
        <form action="#" data-bind="submit: Save" id="add-app-dlg" class="form" novalidate="novalidate">
            <div class="alert alert-info">
                We strongly recommend that you create different applications for different device types as it improves our error analytics.
                <strong>OutOfMememoryException</strong> isn't as important in a mobile device as it's in a server with a lot of resources.            
            </div>
            <div class="control-group">
                <label class="control-label">Application name:</label>
                <div class="controls">
                    <input type="text" data-bind="value: Name" name="Name" required="" minlength="3" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Application type:</label>
                <div class="controls">
                    <select data-bind="value: ApplicationType" name="ApplicationType">
                        <option value=""></option>
                        <option value="Mobile">Mobile device</option>
                        <option value="Client">Client computer</option>
                        <option value="Server">Server</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" data-bind="click: Save">Create aplication</a>
        <a href="#" class="btn" data-bind="click: Cancel">Cancel</a>
    </div>
</div>

使用Javascript：

var AddApplicationModel = function () {
        var self = this;
        this.inited = false;
        this.Name = ko.observable().extend({ required: { message: 'Please supply your Name.' } });
        this.ApplicationType = ko.observableArray().extend({ required: true });
        this.Errors = ko.validation.group(self);
        this.isValid = ko.computed(function () {
            return self.Errors.length == 0;
        });
        this.Save = function () {
            if (!self.isValid()) {
                self.Errors.showAllMessages();
                return;
            }

            //closing the modal and invoking a callback here in the real version
        };
        this.Cancel = function () {
            //closing modal in the real version
        };

        ko.applyBindings(this, $('#AddApplicationDialog')[0]);
        return this;
    };
new AddApplicationModel();

Answer 1

你的小提琴有两件事是错的：

ko验证插件的cdnjs版本非常错误（另请参阅：Knockout validation hello world not running on jsfiddle）所以请使用github
ko.validation.group(self)默认返回一个可观察数组，因此isValid应该如下所示：
```
this.isValid = ko.computed(function () {
    return self.Errors().length == 0;
});
```

演示JSFiddle。

淘汰赛验证不起作用

1 个答案: