Knockout.js KnockoutJS验证：修改单选按钮验证消息显示位置

我正在使用淘汰验证，当我使用它来验证单选按钮组时，验证错误消息会出现在每个单选按钮旁边。我希望它只显示在一个位置。大概我必须“关闭”单选按钮组验证消息的自动显示，然后在特定位置手动显示验证消息。但是我还没有想出一个办法

这里有一把小提琴来演示我所说的：

我希望其他输入类型（例如文本输入）保留自动向右显示消息的行为

我如何设置这个

谢谢

p、 对于后代，JSFIDLE代码如下：

// 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);

//HTML
名字：
姓氏：
问题类型：
销售额
支持
其他
单击上面的按钮更新这些值
错误计数：
错误消息：
//JavaScript
ko.validation.init({
insertMessages:true，
装饰元素：是的，
errorMessageClass:'应用程序--验证--错误消息'，
errorElementClass:'应用程序--验证--无效的输入元素'
});
var响应选项=[
{
“id”：1，
“文本”：“销售”
},
{
“id”：2，
“文本”：“支持”
},
{
“id”：3，
“文本”：“其他”
}
];
var vm={
名字：ko.可观察（“”），
姓氏：ko.可观察（“”），
问题类型：可观察（“”），
triggerGroupValidation:函数（）{
var errors=ko.validation.group（vm，{deep:true，observable:false}）；
vm.errorCount（errors（）.length）
var stringErrors=''；
对于（var i=0；i

您可以使用

验证选项

绑定来否决元素的全局选项。将单选按钮包装在一个div中，并添加数据绑定

验证选项：{insertMessages:false}

。为错误消息的显示添加一个额外的span元素，并将其绑定为：

data bind=“validationMessage:questionType”

：

工作示例：

<div data-bind="foreach: [{val: 'sales', title: 'Sales'}, {val: 'support', title: 'Support'}, {val: 'other', title: 'Other'}], validationOptions: {insertMessages: false}">
    <div><label>
        <input type='radio' name='questionType' data-bind="value: val, checked: $parent.questionType"/>
        <span data-bind="text: title"></span>
    </label></div>
</div>
<span data-bind="validationMessage: questionType" class="app--validation--error-message"></span>