淘汰验证自定义消息模板的问题

Question

我没有使用Knockout验证,我试图了解它可以做些什么.

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

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

谢谢.

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

假设我在视图模型中有以下内容:

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可能有自定义错误消息.如果它们都使用相同的模板,模板如何适应自定义错误消息？

我希望这是有道理的.

Answer 1

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

在一个项目中,我们正在做类似的事情.我们显示带有错误编号的徽章,但我们使用decorateElement突出显示字段和errorsAsTitleOnModified以显示悬停在输入上时的错误.

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

在模板内部,您可以通过引用"field"来访问经过验证的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/