Question

我已经创建了一个JSFiddle来帮助演示我的问题：http://jsfiddle.net/jeffreyrswenson/CrYWn/5/

以下是我想看到的内容：

页面加载时不应显示消息。
按下提交按钮时应显示消息。
更改输入值并且用户离开元素后，应显示消息。（标签或点击下一个字段）
用户在不改变的情况下离开输入后会出现消息。（例如，需要一个字段，用户在字段中标记，但不输入值。我希望在发生这种情况时出现验证消息。）

前四项工作正如我所料。最后一项是否可能，如果可以，我需要更改什么才能启用该行为？

HTML：

<label>First name:
<input data-bind='value: firstName' />
</label>
<br/>
<label>Last name:
    <input data-bind='value: lastName' />
</label>
<br/>
<button type="button" data-bind='click: submit'>Submit</button>
<br/>
<span data-bind='text: errors().length'></span> errors

视图模型：

var viewModel = function () {
       ko.validation.configure({
           decorateElement: true,
           registerExtenders: true,
           messagesOnModified: true,
           insertMessages: true,
           parseInputAttributes: true,
           messageTemplate: null
       });

       this.firstName = ko.observable().extend({
           required: true
       });
       this.lastName = ko.observable().extend({
           required: true,
           pattern: {
               message: 'Hey this doesnt match my pattern',
               params: '^[A-Z0-9]+$'
           }
       });

       this.submit = function () {
           if (this.errors().length == 0) {
               alert('Thank you.');
           } else {
               this.errors.showAllMessages();
           }
       };
       this.errors = ko.validation.group(this);
   };

Answer 1

您只需使用value binding的标准valueUpdate选项，您可以在其中指定其他事件来触发您的媒体资源更改以及验证。

所以你只需要在绑定上添加valueUpdate: "blur"设置：

<label>First name:
    <input data-bind='value: firstName, valueUpdate: "blur"' />
</label>
<br/>
<label>Last name:
    <input data-bind='value: lastName, valueUpdate: "blur"' />
</label>

演示JSFiddle。

Answer 2

在我的情况下，我需要在按键关闭后更新值，因为如果输入有值，我会显示一些字段。我希望更新基础值，但不希望在用户选中下一个输入之前显示验证。

一些CSS和几个绑定对我有用：

CSS：

div.validationWrapper.standard-focus.has-focus .validationMessage 
{
    display: none;
}

HTML：

<div class="validationWrapper standard-focus" data-bind="css: { 'has-focus': MyObservableHasFocus() }">
    <input class="standard-focus" type="text" data-bind="hasFocus: MyObservableHasFocus, value: MyObservable, valueUpdate: 'afterkeydown'" />
</div>

淘汰赛：

self.MyObservable = ko.observable('').extend({/* Your validation here */});
self.MyObservableHasFocus = ko.observable(false);

结果是一个observable，它在键入后更新它的值，并在失去焦点后显示验证消息。

在Blur上验证

2 个答案: