Knockout-Validation - data-bind observable array

Question

我正在尝试对单选按钮组进行一些验证，其中每个组需要选择一个值。我正试图使用击倒验证来进行验证，但我在制作这种动态时遇到了麻烦。我可以设置验证，但是让它单独验证每个组是一个挑战。现在它对所有的问题都一视同仁。我有一个关于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绑定来定制对象验证消息的显示，并使用knockout验证选项停止默认的错误消息插入。

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>

您已经将相同的属性绑定到两个问题，因此每当选择一个字段时，它也会选择另一个字段。你可以在observableArray中将问题列表作为对象数组。

问题列表结构示例:-

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验证，你必须启用深度(递归)验证。

小提琴演示