KnockoutJSの検証：ラジオボタンの検証メッセージの表示位置の変更

Question

ノックアウト検証を使用しています。ラジオボタングループの検証に使用すると、すべてのラジオボタンの横に検証エラーメッセージが表示されます。ただ一つの場所に表示したいのですが。おそらく、私は、ラジオボタングループの検証メッセージの自動表示を "オフ"にしてから、特定の場所に検証メッセージを手動で表示する必要があります。しかし...私はそれを行う方法を考え出していない。自動的に右にメッセージを表示する動作を保持するために、私は他の入力タイプ（例えば、テキスト入力）のために希望 http://jsfiddle.net/jbeall/tD4nU/2/

：ここ

は私が話して何を証明フィドルです。

どうすれば設定できますか？

ありがとうございます！

p.s.後世のために、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); 

Answer 1

あなたは要素のためのグローバルオプションを覆すために結合validationOptionsを使用することができます。 divのラジオボタンをラップし、データバインディングvalidationOptions: {insertMessages: false}を追加します。エラーメッセージを表示するための追加的なスパン要素を追加し、それをバインド：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> 

作業例：私のために働いたfiddle