Clever Geek Handbook

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.

+3


source to share


3 answers


This is a very common problem with select items.

After you have selected SelectedValues, follow these steps:



SelectedValues.isModified(false);

This should fix it

0


source


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.

0


source


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

0


source






More articles:


All Articles