在Blur上验证

时间:2014-01-29 01:21:31

标签: knockout-validation

我已经创建了一个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);
   };

2 个答案:

答案 0 :(得分:9)

您只需使用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

答案 1 :(得分: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,它在键入后更新它的值,并在失去焦点后显示验证消息。