2012-08-17 20 views
14

Quiero añadir una clase CSS a un elemento select en mi opinión, mi modelo de vista tiene una propiedad que he extiende usando Knockout-Validación:Agregar clase CSS con Knockout Validador

self.selectedRootCause = ko.observable().extend({ 
    required: true 
}); 

Entonces mi select es de esta manera:

<form data-bind="submit: closeComplaint" method="post"> 
    <select data-bind="options: rootCauses, 
          optionsText: 'RootCauseText', 
          value: selectedRootCause, 
          optionsCaption: 'Choose..', 
          validationOptions: { errorElementClass: 
               'input-validation-error' }"> 
    </select> 

    <input type="submit" value="Close Complaint" /> 
</form> 

Mi función closeComplaint se ve así:

self.closeComplaint = function() { 
    if (self.errors().length == 0) { 
     $.ajax({ 
      url: '@Url.Action("CloseComplaint")', 
      data: new DetailsComplaintAdmin(self.currentComplaint(), 
             self.selectedRootCause().RootCauseId 
       ), 
      success: function (data) { 
       console.log(data); 
      } 
     }); 
    } 
} 

Sólo para completar, aquí es mi self.errors() función:

self.errors = ko.validation.group(self); 

El problema es la clase input-validation-error no parece ser añadido a mi entrada select cuando presente mi formulario? ¿Algunas ideas?

Respuesta

22

Pedido esta link

Su dicho que usted tiene que fijar decorateElement a true para aplicar CSS clases de etiquetas de entrada.
Así que cuando aplico ese parámetro global funciona:

ko.validation.configure({ 
    decorateElement : true 
}); 

Pedido esta jsFiddle demo

Nota: En las versiones más recientes de la biblioteca Knockout validación, la opción de configuración decorateElement se ha renombrado a decorateInputElement (details)

+0

¡Muchas gracias! ¡Esto funciona! – CallumVass

+0

¡Impresionante! ¡¡¡Trabajos!!! – nikoloza

+2

Plus 1 para la mención de decorateInputElement –

Cuestiones relacionadas