我正在使用 Knockout Validation,当我使用它来验证单选按钮组时,验证错误消息会出现在每个单选按钮旁边。我希望它只显示在一个位置。大概我将不得不“关闭”单选按钮组的验证消息的自动显示,然后在特定位置手动显示验证消息。但是......我还没有想出办法做到这一点。
这是一个演示我在说什么的小提琴:http: //jsfiddle.net/jbeall/tD4nU/2/
我希望其他输入类型(例如,文本输入)保留自动在右侧显示消息的行为。
我该如何设置?
谢谢!
ps 为了后代,jsfiddle 代码如下:
// HTML
<div>
<div>First name: <input type='text' data-bind='value: firstname'/></div>
<div>Last name: <input type='text' data-bind='value: lastname'/></div>
</div>
<div>
Question Type:
<div>
<label>
<input type='radio' value='sales' name='questionType' data-bind="checked: questionType"/>
Sales
</label>
</div>
<div>
<label>
<input type='radio' value='support' name='questionType' data-bind="checked: questionType"/>
Support
</label>
</div>
<div>
<label>
<input type='radio' value='other' name='questionType' data-bind="checked: questionType"/>
Other
</label>
</div>
</div>
<div>
<input type='button' data-bind='click: triggerGroupValidation' value='Trigger validation via group() function'/>
</div>
<div data-bind='text: ko.toJSON(questionType)'></div>
<div>
Click button above to update these values
<div>Error count: <span data-bind='text: errorCount'/></div>
<div>Error messages: <span data-bind='text: errorMessages' /></div>
</div>
// JavaScript
ko.validation.init({
insertMessages: true,
decorateElement: true,
errorMessageClass: 'app--validation--error-message',
errorElementClass: 'app--validation--invalid-input-element'
});
var responseOptions = [
{
"id": 1,
"text": "Sales"
},
{
"id": 2,
"text": "Support"
},
{
"id": 3,
"text": "Other"
}
];
var vm = {
firstname: ko.observable(""),
lastname: ko.observable(""),
questionType: ko.observable(''),
triggerGroupValidation: function(){
var errors = ko.validation.group(vm, { deep: true, observable: false });
vm.errorCount(errors().length)
var stringErrors = '';
for (var i = 0; i < errors().length; i++) {
stringErrors = stringErrors + '||' + errors()[i]();
}
vm.errorMessages(stringErrors);
errors.showAllMessages();
},
errorCount: ko.observable(0),
errorMessages: ko.observable('')
};
vm.questionType.extend({
required: {
message: "Question type required",
params: true
}
});
vm.firstname.extend({
required: {
message: "The first name is required",
params: true
},
minLength: {
message: "The first name is too short",
params: 3
},
})
vm.lastname.extend({
required: {
message: "The last name is required",
params: true
},
minLength: {
message: "The last name is too short",
params: 3
},
})
ko.applyBindings(vm);