knockout.js - 如何为单选按钮组显示一个验证图标

Question

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

我想在“问题 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示例

还有第二个问题——为什么在这个例子中总是显示验证图标？

谢谢！

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 处理字段是否有效。这使您可以在字段有效时显示验证消息（例如绿色标记），并在字段无效时显示验证错误。

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

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