Sprawdzanie poprawności KnockoutJS: modyfikowanie lokalizacji wyświetlania komunikatów sprawdzania przycisków radiowych

Question

Używam sprawdzania poprawności Knockout, a gdy używam go do sprawdzania grup przycisków radiowych, obok każdego przycisku radiowego pojawia się komunikat o błędzie sprawdzania poprawności. Chciałbym, aby wyświetlał się tylko w jednym miejscu. Prawdopodobnie będę musiał "wyłączyć" automatyczne wyświetlanie komunikatów sprawdzania poprawności dla grupy przycisków radiowych, a następnie ręcznie wyświetlić komunikat sprawdzania poprawności w określonej lokalizacji. Ale ... Nie wymyśliłem sposobu, by to zrobić.

Oto skrzypce wykazując co mówię: http://jsfiddle.net/jbeall/tD4nU/2/

chciałbym dla innych typów wejściowych (np wejść tekstowe), aby zachować zachowanie automatycznie wyświetlając komunikat na prawo.

Jak mogę to ustawić?

Dzięki!

p.s. Dla potomności, kod jsfiddle jest poniżej:

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

Można użyć validationOptions wiązania się uchylić globalne opcje elementu. Owiń przyciski radiowe w div i dodaj powiązanie z danymi validationOptions: {insertMessages: false}. Dodatkową Span-elementu do wyświetlania komunikatu o błędzie i powiązać go z: 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> 

przykład robocza: fiddle