How to make multiple choice but not empty
I am new to knockoutjs so there is a very good possibility that this exists and I was just not looking for the right thing.
I have an item <select>
that can have multiple choices. On boot, I want nothing to be selected, but I don't want to run validation on the user before they do anything. I can run a check if something is selected and not selected, or a little "none" button that empties the selected array. It is perfectly. Mine <select>
looks like this:
<select multiple data-bind="options: PossibleValues,
selectedOptions: SelectedValues,
validationCore: SelectedValues">
</select>
As I said, if I explicitly empty SelectedValues
, then I get a client side validation message. If I don't, it isValid()
returns true and I don't see any messages.
So how can I make the required multiple choice and perform a failure check on submit if it is empty, but not highlight it as a boot problem?
EDIT
I tried to simplify my example for my question, but basically I have a ViewModel that has a child ViewModel and that child has an object ko.observable()
as well as a ViewModel. Then it gets this child, which is the ko.observableArray()
ViewModels. This lowest level is where I am trying to see validation errors (the addition { deep: true }
only screams about being too deep). The problem is that the lowest level - let it call it greatgrandchildVM
- returns true when I call isValid()
, even though it's clearly not valid. Quoting through an array greatgrandchildVM
lets me see what errors()
matters in it.
Why don't they bubble and throw isValid()
false? Obviously I can hack a for loop to iterate through an array greatgrandchildVM
and do it myself, but I guess there is a way to knock this out and I'm too new to know.
This is a very common problem with select items.
After you have selected SelectedValues, follow these steps:
SelectedValues.isModified(false);
This should fix it
Try using this syncModified extender .
Promote forced validation and reset
When you have a complex data structure, using ko.validation.group with deep: truth can often be a big pain. On the other hand, a complex data structure probably also includes arrays and objects that need to be checked.
Note. This is an extension, not a validation rule.
Use the 'optionsCaption' binding
<select multiple data-bind="options: PossibleValues,
selectedOptions: SelectedValues,
validationCore: SelectedValues,
optionsCaption: 'emptyValueText'">
</select>
This gives the addition of a blank value which displays emptyValueText
when no value is selected.
If optionsCaption is not specified, knockout simply selects the first of yours
PossibleValues
, which then checks the selection.
The Caption parameter can also be an observable or just an empty string
Hope it helps