knockout.js - KnockoutJS の検証: ラジオ ボタンの検証メッセージの表示場所の変更

Question

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