javascript - 敲除验证自定义消息模板的问题

Question

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

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

有没有人做过这个或者知道如何完成这个？

谢谢。

编辑:(我正在尝试做的更详细的例子)

假设我的 View 模型中有以下内容:

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

我的 HTML:

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

我的理解是，如果名字文本框留空，那么(默认情况下)文本框右侧会显示一些文本，说明此字段是必填项。

我想了解的是如何将在右侧显示错误 text 的默认行为更改为在右侧显示 icon，当鼠标悬停在该图标上时, 会弹出错误信息。

所以，开始应该是这样的:

<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 中将文本绑定(bind)到什么，以便为每个错误显示正确的错误消息。 IOW、名字和姓氏可以有自定义错误消息。如果他们都使用相同的模板，模板如何容纳自定义错误消息？

我希望这是有道理的。

Answer 1

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

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

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

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

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

我创建了一个 fiddle 来展示它的实际效果:http://jsfiddle.net/nuDJ3/180/