未显示消息的复选框的淘汰验证

Question

我有这个jsFiddlehttp://jsfiddle.net/63qJe/3/这是有效的，但没有显示验证方法。

HTML:

<input type="checkbox" data-bind="checked: approveTerms"/>
<label for="algvw">Yes, I agree to the general terms and conditions</label>
<span data-bind="validationMessage: approveTerms"></span>
<button type="button" data-bind="click: stepForward">Commit order</button>

JS:

ko.validation.rules['checkedTerms'] = {
    validator: function (value) {
        console.log(value);
        if (!value)
            return false;
        return true;
    }
};
function ovm() {
    var self = this;
    self.approveTerms = ko.observable(false).extend({
        checkedTerms: { message: 'Approval required' }
    });
    self.currentStep = ko.observable(1);
    self.stepForward = function () {
        if (self.currentStep() === 1)
            commitOrder(self);
    };
}
window.vm = new ovm();
ko.applyBindings(vm);
function commitOrder(vm) {
    if (vm.approveTerms())
        alert("GO!");
    else
        alert("Nooooooooo");
}

我对KO还是个新手，还在学习。我在文本字段上还有其他验证器，但这个复选框让我头疼。

为什么我不能这么做：

self.approveTerms = ko.observable(false).extend({ required: true, message:'approval req.' });

Answer 1

如果您正在创建自定义验证器规则，则需要调用

 ko.validation.registerExtenders();

在您的自定义规则之后，为了验证插件注册新的验证器。

演示JSFiddle。

或者，如果你只想检查你的复选框是否被选中，你可以使用内置的equal验证器：

self.approveTerms = ko.observable(false).extend(
    { equal: { params: true, message:'approval req.' }});

演示JSFiddle。

Answer 2

尝试自定义验证器而不是

var checkedTerms = function (value) {
        alert(value);
        console.log(value);
        if (!value) {
            return false;
        }
        return true;
    };
function ovm() {
    var self = this;
    self.approveTerms = ko.observable(false).extend({
        validation: { validator:checkedTerms, message: 'Approval required' }
    });
    self.currentStep = ko.observable(1);
    self.stepForward = function () {
        if (self.currentStep() === 1)
            commitOrder(self);
    };
}

这是工作小提琴：http://jsfiddle.net/63qJe/5/