淘汰赛验证复选框列表所需的验证消息答案

【问题标题】：Knockout Validation Checkbox List Required Validation Message淘汰赛验证复选框列表所需的验证消息
【发布时间】：2014-03-15 09:30:34
【问题描述】：

我正在尝试使用 Knockout 创建一个复选框列表，并要求使用 Knockout Validation 至少选中一个复选框。

我遇到的问题是，如果未选中复选框，则所需的验证消息会出现多次，每个选项一次。我该如何解决这个问题？

工作示例：http://jsfiddle.net/aaronhoffman/BtK3t/

HTML

<script id="koValidationCustomMessageTemplate" type="text/html">
    <em class="text-danger" data-bind="validationMessage: field"></em>
</script>

<div class="col-sm-5" data-bind="foreach: TheCheckboxListOptions">
    <div class="checkbox">
        <label>
            <input type="checkbox" data-bind="value: $data, checked: $root.TheCheckboxListSelectedValues" /><span data-bind="text: $data"></span>
        </label>
    </div>
</div>

和javascript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: "koValidationCustomMessageTemplate"
});

var TheViewModel = {

    TheCheckboxListOptions: [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4"
    ],

    TheCheckboxListSelectedValues: ko.observableArray().extend({
        required: { message: "At least one option is required." }
    }),

};


ko.applyBindings(TheViewModel);

【问题讨论】：

您能否更改视图模型以包含一个计算布尔属性，该属性返回 true 的选定数量大于 1，并针对该值而不是整个数组编写验证？
谢谢，我正在使用与今天类似的解决方案，我只是在寻找更好的解决方案。

标签： knockout.js checkboxlist knockout-validation

【解决方案1】：

剔除验证生成的错误集合只有一条错误消息。但是，因为 observable 绑定到控件数组，所以每个控件显示一次。您可以将验证消息模板自定义为星号或每个控件为空，然后在控件数组上方显示验证摘要。看看我修改过的小提琴。

http://jsfiddle.net/BtK3t/2/

<script id="koValidationCustomMessageTemplate" type="text/html">
    <span style="color: Red" data-bind="if: field.isModified() && !field.isValid()">*</span>
</script>

<ul data-bind="foreach: errors, visible: showValidationSummary"
    style="display: none; margin-left: 5px; text-align: left;">
    <li style="color: Red"><span data-bind="text: $data"></span></li>
</ul>

【讨论】：

【解决方案2】：

对于这种类型的东西，我通常在提交之前使用 jQuery 验证来验证表单（回发或通过 AJAX）。我编写了一个自定义 jQuery 验证规则。这是一个例子：

$.validator.addMethod('required_checkbox', function(value, element) {
    var $module = $('#myCheckboxList');
    var checked = $module.find('input[type="checkbox"]:checked');
    if (checked.length === 0) {
        return false;
    } else {
        return true;
    }
});

$.validator.addClassRules('required-checkbox', { 'required_checkbox': true });

标记看起来像：

<ul id="myCheckboxList">
    <li><input type="checkbox" name="MyCheckboxes" class="required-checkbox" value="@myList.Id"></li>
    ....
</ul>

在提交之前，您可以通过在 Knockout 视图模型中执行类似操作来验证整个表单或其中的一部分：

$('form').validate();

【讨论】：