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

我还没有使用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，名字和姓氏可能有自定义错误消息。如果他们都使用相同的模板，模板如何容纳自定义错误消息？

我希望这是有道理的。

来源

2013-01-03 RHarris

一些代码将有助于解决方案以适应您的需求，但得到的答复是肯定的。 Knockout允许您使用可用于覆盖默认错误文本（https://github.com/ericmbarnard/Knockout-Validation/wiki/Validation-Bindings）的validationMessage属性设置自定义div或span标签。除此之外，您可以为您的观察对象设置一个自定义验证器功能，如果发现错误，它可以激活/停用工具提示。如果您可以向我们展示一些示例代码（最好是在小提琴中），我们可以帮助您进行所需的更改，使其按您想要的方式工作。 – 2013-01-07 22:39:10

感谢您的回复，感谢您的延迟......几个假期。我添加了一个编辑，以更全面地解释我所追求的。 – RHarris

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

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

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

在模板内部，您可以通过引用'field'来访问已验证的observable。错误消息存储在您的observable的属性“错误”中。

<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-25 14:03:11 delixfe

谢谢！这正是我想要完成的！ – RHarris

其实，现在我玩这个更多一点，我看到它没有像我期望的那样工作。首先，X（徽章）永远不会消失。其次，检查这个小提琴http://jsfiddle.net/nuDJ3/5/并注意清除一个字段不会触发错误消息。我错过了什么吗？ – RHarris

哦，我很抱歉。我错过了隐藏信息，如果它有效或未修改。敲除验证插入跨度一次，然后你必须使用普通绑定。我更新了答案并创建了[fiddle]的新版本（http://jsfiddle.net/nuDJ3/6/）。诀窍是将“if：field.isModified（）&&！field.isValid（）”插入到跨度的绑定中。 – delixfe

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

回答

相关问题