11

我没有使用 Knockout Validation，我正在尝试了解可以用它做什么。

我试图弄清楚当出现错误时是否可以在输入标签的右侧显示图标而不是错误消息。而且，如果用户将鼠标悬停在图标上，则会显示错误消息。

有没有人这样做或知道如何做到这一点？

谢谢。

编辑：（我正在尝试做的更详细的示例）

假设我的视图模型中有以下内容：

var firstName = ko.observable().extend({required: true});

我的 HTML：

<input data-bind="value: firstName" />

我的理解是，如果名字文本框留空，那么（默认情况下）一些文本将显示在文本框的右侧，说明该字段是必需的。

我想了解的是如何将在右侧显示错误文本的默认行为更改为在右侧显示一个图标，当将鼠标悬停在该图标上时，将弹出错误消息。

所以，开始会是这样的：

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
    //This icon should only display when there is an error
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/>

    //css/javascript would display this when user hovers over the above icon
    <span data-bind="validationMessage: field"  />  
</div>

我不知道我是否正确使用了 messageTemplate 功能。我也不知道在 customTemplate 中将文本绑定到什么，以便为每个错误显示正确的错误消息。IOW、firstname 和 lastname 可能有自定义错误消息。如果他们都使用相同的模板，模板如何容纳自定义错误消息？

我希望这是有道理的。

4

1 回答 1

18

可以显示图标并在悬停时显示错误消息。

在一个项目中，我们正在做类似的事情。我们显示带有错误编号的标记，但我们使用 decorateElement 突出显示字段，并使用 errorsAsTitleOnModified 来显示悬停在输入上时的错误。

要创建错误消息模板，您应该将模板包装在脚本标记中。它的工作方式类似于ko 模板绑定的模板。

在模板中，您可以通过引用“字段”来访问经过验证的 observable。错误消息存储在 observable 的属性 'error' 中。

<script type="text/html" id="myCustomTemplate">
    <span data-bind="if: field.isModified() && !field.isValid(), 
                     attr: { title: field.error }">X</span>
</script>

我创建了一个小提琴来展示这一点：http: //jsfiddle.net/nuDJ3/180/

于 2013-01-25T14:03:11.820 回答