Convalida KnockoutJS: modifica delle posizioni di visualizzazione dei messaggi di convalida del pulsante di opzione

Question

Sto utilizzando la convalida del blocco e quando lo utilizzo per convalidare i gruppi di pulsanti di opzione, il messaggio di errore di convalida viene visualizzato accanto a ciascun pulsante di opzione. Mi piacerebbe che fosse visualizzato in un'unica posizione. Presumibilmente dovrò "spegnere" la visualizzazione automatica dei messaggi di convalida per il gruppo pulsanti radio, e quindi visualizzare manualmente il messaggio di convalida in una particolare posizione. Ma ... non ho trovato un modo per farlo.

Ecco un violino che dimostra di cosa sto parlando: http://jsfiddle.net/jbeall/tD4nU/2/

Vorrei per altri tipi di ingresso (ad esempio, gli ingressi di testo) per mantenere il comportamento di visualizzare automaticamente un messaggio a destra.

Come posso configurarlo?

Grazie!

p.s. Ai posteri, il codice jsfiddle è qui sotto:

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

È possibile utilizzare il validationOptions legame di annullare le opzioni globali per un elemento. Avvolgi i pulsanti di opzione in un div e aggiungi l'associazione dati validationOptions: {insertMessages: false}. Aggiungere un arco-elemento aggiuntivo per la visualizzazione del messaggio di errore e associarlo con: 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> 

esempio di lavoro: fiddle