淘汰赛验证 - 数据绑定可观察数组

Question

我正在尝试对单选按钮组进行一些验证，其中每个组都需要选择一个值。我正在尝试使用Knockout-Validation 进行验证，但我无法使这个动态化。我可以设置验证，但让它单独验证每个组是一个挑战。现在它对所有组的问题都一视同仁。我有一个example on JSFiddle，它显示了当前的情况。

我在后端从数据库动态创建问题，但我可能会为每个问题添加一个唯一标识符，但我如何引用一个我无法提前知道的可观察姓名我无法预先确定数量的问题？

JSFiddle的示例代码：

$(function() {
var viewModelQuestionnaire = ko.validatedObservable({
    'checkScore': ko.observable().extend({
        required: true
    }),
    submit: function () {
        if (this.isValid()) {
            alert('Thank you.');
        } else {
            console.log(this);
            alert('Please check your submission.');
            this.errors.showAllMessages();
        }
    }
});

ko.applyBindings(viewModelQuestionnaire);

});

<form action="/Questionnaire/Save" method="post">    <table id="ESAS-questions">
        <tr class="esas-question-row">
            <td class="esas-best-area">
                <div class="esas-best-symptom">No Pain</div>
            </td>
            <td class="esas-score-area">
                    <span class="esas-score">0<input type="radio" name="question_id-1" value="0" data-bind="checked: checkScore"/></span>
                    <span class="esas-score">1<input type="radio" name="question_id-1" value="1" data-bind="checked: checkScore"/></span>
                    <span class="esas-score">2<input type="radio" name="question_id-1" value="2" data-bind="checked: checkScore"/></span></td>
            <td class="esas-worst-area">
                <span class="esas-worst-symptom">Worst Possible Pain</span>
            </td>
        </tr>
        <tr class="esas-question-row">
            <td class="esas-best-area">
                <div class="esas-best-symptom">No Tiredness</div>
                    <div class="esas-best-subtext">(Tiredness = lack of energy)</div>
            </td>
            <td class="esas-score-area">
                    <span class="esas-score">0<input type="radio" name="question_id-2" value="0" data-bind="checked: checkScore"/></span>
                    <span class="esas-score">1<input type="radio" name="question_id-2" value="1" data-bind="checked: checkScore"/></span>
                    <span class="esas-score">2<input type="radio" name="question_id-2" value="2" data-bind="checked: checkScore"/></span> </td>
            <td class="esas-worst-area">
                <span class="esas-worst-symptom">Worst Possible Tiredness</span>
            </td>
        </tr>
</table>
<p><input type="submit" value="Submit" class="finish" data-bind="click:submit" /></p>

Answer 1

您可以避免出现多个错误消息，因为您必须使用validationMessage 绑定自定义对象验证消息的显示，并使用敲除验证选项停止默认错误消息插入。

data-bind="validationOptions: { insertMessages: false }"  //default validation will not insert  


 // customize the display of your objects validation message
 <p class="invalid" data-bind="validationMessage: checkScore"></p>

您对两个问题都有相同的属性，因此只要选择一个字段，它也选择其他一个字段。您也可以将问题列表与观察员中的对象数组有问题。

问题列表的示例结构：-

var questions=[
  {
    question: "No Pain",
    checkScore: ko.observable().extend({
       required: true
    }),
    description: "Worst Possible Pain"
  },
  {
    question: "No Tiredness (Tiredness = lack of energy)",
    checkScore: ko.observable().extend({
      required: true
    }),
    description: "Worst Possible Tiredness"
  }
]

但对于 questionList 验证，您必须启用深度（递归）验证。

Fiddle Demo