Question

我正在使用knockoutjs和knockout验证插件。

我想在“问题1”标题之后显示广播组的一个验证图标。我怎么能这样做？

<label>Question 1:</label>
<div>
    <!-- ko foreach: answers -->
    <div>
        <input type="radio" data-bind="attr: { value: id, id: id, name: 'answers' }, checked: $parent.selectedValue" />
        <label data-bind="text: text, attr: { for: id }"></label>
    </div>
    <!-- /ko -->
</div>

有一个jsfiddle example

另外第二个问题 - 为什么验证图标总是在这个例子中显示？

谢谢！

Answer 1

您可以使用validationMessage绑定处理程序将验证消息放在另一个元素上：

这会显示验证消息：

<label>Question 1:
    <span data-bind="validationMessage: selectedValue"></span>

此示例显示自定义消息模板：

<label>Question 1:
        <input style="display:none" 
            data-bind="value:selectedValue, 
                       validationOptions: {messageTemplate: 'icon'}" />
</label>

或者更简单地说，如果您想使用默认的messageTemplate ：

<label>Question 1:
        <input style="display:none" data-bind="value:selectedValue" />
</label>

至于第二个问题，无论字段是否有效，都会处理messageTemplate。这允许您在字段有效时显示验证消息（例如绿色chackmark），并在其变为无效时显示验证错误。

您可以将if绑定处理程序与field变量结合使用来控制消息何时可见。

<script type="text/html" id="icon">
    <span data-bind="if: field.isModified() && !field.isValid()">X<span>
</script>

如何显示单选按钮组的一个验证图标

1 个答案: