Xác nhận loại bỏ: Bất kỳ tùy chọn nào để áp dụng errorElementClass cho phụ huynh của đầu vào?

Question

Plugin xác thực Knockout có bất kỳ tùy chọn nào để áp dụng lớp lỗi cho cha mẹ hoặc cha mẹ của đầu vào bị lỗi không? Nếu không ai có thể đề nghị một cách tiếp cận để sửa đổi xác nhận loại trực tiếp để làm điều này?

Vui lòng xem phần sau đây để biết ví dụ về những gì tôi đang cố gắng đạt được. Trong số xác nhận hộp loại trực tiếp đặt lớp của đầu vào, nhưng tôi muốn nó thay vì thiết lập các lớp của sự kiểm soát nhóm chứa:

http://jsfiddle.net/fbA4m/1/

Xem

<p>Clear the field and tab out of it to "see" the current behaviour - error class is added directly to the input by knockout validation. But I want to add class "error" to control-group containing the input instead of directly to the input.</p> 
<div class="form-horizontal"> 
<div class="control-group"> 
<label class="control-label">Field</label> 
<div class="controls"> 
<input type="text" data-bind="value: testField" class=""> 
</div> 
</div> 
    <button data-bind="click: setErrorOnControlGroup">Click to see desired effect</button> 
</div> 

Javascript

ko.validation.configure({ 
    registerExtenders: true, 
    messagesOnModified: true, 
    decorateElement: true, 
    errorClass: 'error', 
    insertMessages: false, 
    parseInputAttributes: true, 
    messageTemplate: null 
}); 

var viewModel = { 
    testField: ko.observable("123").extend({required: true}), 
    setErrorOnControlGroup: function() { 
     $("input.error").removeClass("error"); 
     $(".control-group").addClass("error"); 
    } 
}; 

ko.applyBindings(viewModel); 

Biểu định kiểu (Chỉ minh họa - Tôi không cần điều này vì tôi muốn sử dụng các phong cách twitter bootstrap)

/*NOTE: This is not actually the style I want, it just illustrates the default behaviour of knockout validation*/ 
input.error { 
    background-color: #aaffaa; 
} 

Tôi hỏi vì tôi đang sử dụng phong cách twitter bootstrap và nó sử dụng yếu tố phụ huynh kiểm soát nhóm của đầu vào cho phong cách "lỗi" đầu vào.

Answer 1

Bạn có thể viết ràng buộc của riêng mình. Hãy xem nguồn gốc của ràng buộc validationElement trong nguồn xác nhận loại trực tiếp.

Answer 2

Tôi đã chỉnh sửa bí danh của mutex để đạt được hiệu quả. http://jsfiddle.net/3vGVC/9/. Có chỗ cho cải tiến, có lẽ để người ta có thể chỉ định lớp css để áp dụng. Đây là bindingHandler, có thể được áp dụng cho vùng chứa.

ko.bindingHandlers.validationElement = { 
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var valueIsValid = valueAccessor().isValid(); 
    if(!valueIsValid) { 
     $(element).addClass("error"); 
    } 
    else { 
     $(element).removeClass("error"); 
    } 
} 

}