使用Knockout验证单选按钮

Question

我面临使用淘汰赛验证单选按钮的问题。

这是显示我的问题的小提琴 - fiddle。

<input type="radio" data-bind="checked:agree" name="agree" />agree
    <br />
<input type="radio" data-bind="checked:agree" name="agree" />disagree
    <br />
<input type="checkbox" data-bind="checked:vehicle" value="bike" />bike
    <br />
<input type="checkbox" data-bind="checked:vehicle" value="car" />car
    <br />

agree: ko.observable().extend({
    required: true
}),
vehicle: ko.observable().extend({
    required: true
}),
save: function () {
    if (this.isValid()) {
        alert('success');
    }
    else {
        this.errors.showAllMessages();
        alert('error');
    }
}

Answer 1

你的电台需要一个值：

<input type="radio" data-bind="checked:agree" name="agree" value="1" />agree
<input type="radio" data-bind="checked:agree" name="agree" value="2" />disagree

对于消息，当您的observable未使用validationMessage绑定绑定时（此处使用value绑定），您需要使用checked绑定：

<span data-bind="validationMessage: agree"></span>

修改

如果您需要强制用户选中该复选框，则需要创建自己的规则：

ko.validation.rules['trueOnly'] = {
                                     validator: function(val) {
                                                                 return val;
                                     },
                                     message: "This checkbox is required"
                                     }
ko.validation.registerExtenders();

然后像这样延伸：

vehicle: ko.observable().extend({
             trueOnly: true
         }),

查看here

评论后更新：

要检查是否至少有一个是真的，您需要进行一些更改：

1. 创建两个不同的observable，每个复选框一个
2. 创建不同的规则，以验证是否至少检查过一个

验证规则可能如下所示：

ko.validation.rules['oneOrMoreChecked'] = {
    validator: function (val, params) {
            return val || params.otherVal();
        },
        message: "This checkbox is required"
    }

验证声明：

vm().vehicle.extend({
    oneOrMoreChecked: {
        otherVal: vm().vehicle2
    }
});

更新fiddle