convalida a eliminazione diretta: qualsiasi opzione per applicare errorElementClass a padre dell'input?

Question

Il plug-in di convalida di Knockout ha un'opzione per applicare la classe di errore al genitore o genitore-genitore dell'input in errore? Se no, qualcuno può suggerire un approccio per modificare la validazione ad eliminazione diretta per fare questo?

Si prega di vedere il seguente violino per un esempio di ciò che sto cercando di ottenere. Fuori dalla convalida scatola ko imposta la classe di ingresso, ma lo voglio per impostare invece la classe del contenente controllo di gruppo:

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

View

<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); 

Foglio di stile (Solo illustrazioni - Non dovrei bisogno di questo perché voglio l'uso degli stili 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; 
} 

chiedo perché sto utilizzando Twitter bootstrap styling e utilizza elemento genitore controllo del gruppo dell'ingresso allo stile "errore" ingressi.

Answer 1

È possibile scrivere la propria associazione. Dai un'occhiata all'origine del binding validationElement nella convalida di knockout.

Answer 2

Ho ottimizzato il violino di mutex per ottenere l'effetto. http://jsfiddle.net/3vGVC/9/. C'è comunque spazio per miglioramenti, forse per poter specificare la classe css da applicare. Ecco bindingHandler, che può essere applicato al contenitore.

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

}