如何在基于Knockout的表单中实现此验证？

Question

我开始使用SPA模板（单页面应用程序）处理ASP.NET MVC4解决方案。

起始模板使用一种post-it设计来管理一些待办事项列表。

我以这种方式略微修改了模板：

• 不再有用于推迟元素的post-it设计
• 但是列出所有元素的表格+每个元素上的删除+编辑按钮
表格末尾的
• ：添加按钮

我现在能够在这样的表单标签中编辑一个元素：

<form data-bind="with: currentTodoList, validate: true">
    <h1>Edition</h1>
    <table>
        <tr>
            <td>ID</td>
            <td><b data-bind="text: todoListId"></b></td>
        </tr>
        <tr>
            <td>User ID:</td>
            <td><input class="required" data-bind="value: userId" /></td>
        </tr>
        <tr>
            <td>Title:</td>
            <td><input class="required" data-bind="value: title" /></td>
        </tr>
        <tr>
            <td>Category:</td>
            <td><input data-bind="value: category" /></td>
        </tr>
    </table>

    <p>
        <button data-bind="click: $parent.saveTodoList">Save</button>
        <button data-bind="visible: todoListId, click: $parent.deleteTodoList">Delete</button>
        <button data-bind="click: $parent.showGrid">Cancel</button>
    </p>
</form>

正如您在上面所看到的，我在表单标记上设置了验证数据绑定，并且我有一些带有所需类的输入元素。

当我测试此实现时，它无法按预期工作。例如：

• 如果我清除（清空）userId字段（这是必需的），我有一条红色验证消息（图1）。行。
• 如果我再次填写此userId字段，则红色验证消息将消失。行。
• 然后，如果我清除（清空）标题字段（这也是必需的），我在userId字段旁边有红色验证消息（图2）。 NOK。

反之亦然：userId <--> title。知道问题在哪里吗？

这是link下载我的测试VS2012解决方案以重现问题。

Answer 1

好的，所以我稍微修改了你的标记，略微修改了视图模型（不是使用列表，而是编辑单个条目）。

看看这个jsfiddle - http://jsfiddle.net/Zxjrb/1/

我为ID和用户ID添加了验证消息的范围，跳过了标题和类别的范围。

<span data-bind='visible: todoListId.hasError, text: todoListId.validationMessage'> </span>

当Id或UserId字段为空时，以及标题/类别字段没有出现时，您可以看到即将出现的消息。