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>

您已将同一属性绑定到两个问题，因此每当选择一个字段时，它也会选择另一个字段。您可以将问题列表作为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验证，你必须启用深度（递归）验证。

Fiddle Demo

Knockout-Validation - 数据绑定可观察数组

1 个答案: