css - 淘汰赛验证错误消息范围

Question

我正在使用淘汰赛验证插件，它工作正常，但我有一个小问题，我想通过使用 css 使验证跨度有点但更突出，我只想在输入元素之前插入验证跨度，现在它在输入元素之后的附加跨度。

这是它现在的渲染方式，

<input id="personName" class="form-control placeholder has-error" type="text" data-bind="value: name" placeholder="Your name" title="This field is required." data-orig-title="">
<span class="validationMessage" style="">This field is required.</span>

所以我只想在元素之前附加这个跨度。

Answer 1

如果要自定义错误消息的显示方式，则需要使用预定义的验证绑定，在本例中为validationMessage.

使用此绑定，您可以在任意位置显示给定属性的验证消息，例如在input元素之前：

<span data-bind="validationMessage: name"></span>
<input id="personName" class="form-control placeholder has-error" type="text" 
      data-bind="value: name" 
      placeholder="Your name" title="This field is required." data-orig-title="">

此外，为了防止重复显示错误消息，您还需要关闭自动消息插入：

ko.validation.init({insertMessages: false});

演示JSFiddle。