Single select options binding with jQuery validation is not working

Viewed 6506

I am binding a list of objects to a select using knockout. Object Class can have any number of properties

<select id="TheProperty_City" 
        name="TheProperty_City" 
        class="required" 
        data-bind="options: cityList, 
                   optionsText: 'Name',  
                   value: selectedCity, 
                   optionsCaption: '--select the city--'" />

This works perfectly fine and I can use viewModel.selectedCity().Name or viewModel.selectedCity().Value for loading child elements.

My issue is with jQuery validation. If I leave the statement as above, jQuery does not reset the error even after selection.

I fixed it with by specifying the optionsValue in the bind, but then the selectedCity returns the scalar value and not the entire object. Any idea how to preserve the object behavior or do the validation differently?

 <select id="TheProperty_City" 
         name="TheProperty_City" 
         class="required" 
         data-bind="options: cityList, 
                    optionsText: 'Name',  
                    optionsValue: 'Value', //added the optionsValue
                    value: selectedCity, 
                    optionsCaption: '--select the city--'" />

The error stays there when optionsValue is not specified:

Without the OptionsValue

Here's my Object Watch on selectedCity:

viewModel.selectedCity() in watch returns an object

Here's an Object Watch on selectedCity when optionsValue is specified:

With OptionsValue

4 Answers
Related