Проверка нокаута JS: изменение местоположения отображения сообщений о проверке радиокниги

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