NakavtJS onayı: Telsiz butonu doğrulama mesajını değiştirme yeri (ler)

Question

Knockout Doğrulaması'nı kullanıyorum ve radyo düğmesi gruplarını doğrulamak için kullandığımda, her radyo düğmesinin yanında doğrulama hatası mesajı görünür. Sadece bir yerde gösterilmesini isterim. Muhtemelen, radyo düğmesi grubu için doğrulama mesajlarının otomatik gösterimini "kapatmak" ve ardından doğrulama mesajını belirli bir konumda manuel olarak görüntülemek zorunda kalacağım. Ama ... Bunu yapmanın bir yolunu anlamadım. http://jsfiddle.net/jbeall/tD4nU/2/

Ben diğer giriş türleri (örneğin metin girişi) otomatik olarak sağa bir mesaj gösterme davranışı korumak için istiyorum:

İşte bahsettiğimi gösteren bir keman var.

Bunu nasıl kurabilirim?

Teşekkürler!

p.s. kuşaklar için jsfiddle kod aşağıda:

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

Bir element için küresel seçenekleri hükümsüz bağlama validationOptions kullanabilirsiniz. Radyo düğmelerini div içine sarın ve veri bağlama validationOptions: {insertMessages: false}'u ekleyin. Hata mesajının görüntülenmesi için ek bir yayılma-elemanı ekleyin ve bunu bağlamak: 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> 

Çalışma örneği: benim için çalıştı fiddle