Knockout validation on my dropdown don't work

Question

I work on a asp.net mvc project with the durandal template + breeze.

I would like to define validation logic on my view for adding/editing operations.

So far, it works for texts, dropdown populated from database: when the element didn't contains any data, then the element is marked in red thanks to knockout validation.

But it doesn't work for dropdown populated from simple list.

The elements which populates the list comes from an enum:

public class Transport
{
    [Key]
    int id { get; set; }
    ...
    [Required]
    public EnumCategory Category { get; set; }
}

public enum EnumCategory
{
    Cat1,
    Cat2,
    Cat3
}

First problem: I don't know if it is possible to retrieve the enum from my model (server side) to use it client side? For now, I created an array client side for populating my dropdown:

var categories = [
    { id: 1, description: "Cat1" },
    { id: 2, description: "Cat2" },
    { id: 3, description: "Cat3" }];

Second problem: when displaying my view, if the category dropdown already contains some data, the validation works (I mean the field is marked in red if the user clear the dropdown). But if the category dropdown didn' contains any data when view is displayed, then the dropdown is not marked in red.

What I do when validation failed is changing the background color of the element if not valid (thanks to css 'input-validation-error' >> red color).

<select data-bind="options: $root.categories,
                   optionsText: 'description',
                   optionsValue: 'id',
                   optionsCaption: 'Choose...',
                   value: category,
                   validationOptions: { errorElementClass: 'input-validation-error' },
                   valueUpdate: 'afterkeydown'">
</select>

Does anybody know why the validation on my dropdown didin't work?

Thanks.

Answer 1

Just stumbled into this one as well and after some trial and error I found the following:

The validation breaks down because the optionsCaption uses undefined as a value.

Your model apparently uses '' (in my case it was null) Since null != undefined it somehow all breaks down.

Knowing this, there are two solutions:

1. on the Model set the value to undefined (in your example transport.category(undefined)) and make use of the optionsCaption like you're used to
2. add a custom empty selectItem yourself and skip optionsCaption (the solution you used)

Answer 2

When you say "clear the dropdown", how can an option be not picked when there are only three options. Could you make the first dropdown item "Choose an item..." so that you know there will always be one item. If the dropdown index is 0, then show your red error message.

Another option would be to show the red error message if the selectedindex is 0 or the itemcount is 0.

Does that help?

Answer 3

Finally I get it working by adding an element with empty id in my categories list:

var categories = [
    { id: '', description: '--Choose--' },
    { id: 1, description: 'Non classé' },
    { id: 2, description: 'Non nucléaire' },
    { id: 3, description: 'Classe II irradié' },
    { id: 4, description: 'Classe III' }];

I don't know why but simply adding optionsCaption: '--Choose--' don't work for the validation. I mean this element is displayed in my dropdown but the validation process don't consider it as a validation error.

I explicitely had to add an element to my list. Then when this element is selected in my dropdown it is marked as red.