我的下拉列表中的淘汰赛验证不起作用 [英] Knockout validation on my dropdown don't work

问题描述

我使用 durandal 模板 + 微风开发了一个 asp.net mvc 项目.

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.

但它不适用于从简单列表填充的下拉列表.

填充列表的元素来自枚举:

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.

验证失败时我所做的是在无效时更改元素的背景颜色(感谢 css 'input-validation-error' >> red color).

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?

谢谢.

推荐答案

最后，我通过在我的类别列表中添加一个 id 为空的元素来让它工作:

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' }];

我不知道为什么，只是简单地添加 optionsCaption: '--Choose--' 对验证不起作用.我的意思是这个元素显示在我的下拉列表中，但验证过程不认为它是验证错误.

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.

这篇关于我的下拉列表中的淘汰赛验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！