Knockout validation select list values

Question

I have a select list for states with the first value of the array being "-" so that the user must change it and not accidentally submit the form with 'AK' being the default first input. The problem is as soon as the form loads the "Please choose another value" error is showing because the initial value is flagged.

<td>State</td><td><select data-bind="options: $root.stateList, optionsText: 'state', optionsValue: 'state', value: selectedState"></select> </td>

Here's the corresponding js

self.selectedState = ko.observable("").extend({ notEqual: "-" });
self.stateList = [{state: "-"},{state: 'AK'}, {state:'AL'}....{state:'WY'}];

Is there a better way to have a "blank" first value in the list so that it's not set to an incorrect input as soon as the form loads? If so, does a simple .extend({ required: true }); handle the valdiation for it?

Answer 1

Is there a better way to have a "blank" first value in the list so that it's not set to an incorrect input as soon as the form loads?

Yes.

Look at the optionsCaption parameter.