Knockoutjs立即验证

Question

我创建了一个使用AMD的knockoutjs应用程序。目前我有点坚持验证。这里的视图模型代码：

define(['knockout', 'hasher', 'text!./login-window.html'], 
    function (ko, hasher, templateMarkup) { 
    'use strict'; 

    function LoginWindowViewModel(params) { 
     //observables 
     this.properties = ko.validatedObservable({ 
      username: ko.observable().extend({ 
       required: { message: 'Please supply your user name' } 
      }), 
      password: ko.observable().extend({ 
       required: { message: 'Please supply your password' } 
      }) 
     }); 
    } 

    return { viewModel: LoginWindowViewModel, template: templateMarkup }; 

}); 

<div data-bind="css: { 'form-group': true, 'has-error': !properties().username.isValid() }"> 
    <label for="input-username" class="col-lg-3 control-label">Username</label> 
    <div class="col-lg-9"> 
     <input type="text" name="input-username" class="form-control" data-bind="value: properties().username" /> 
    </div> 
</div> 
<div data-bind="css: { 'form-group': true, 'has-error': !properties().password.isValid() }"> 
    <label for="input-password" class="col-lg-3 control-label">Password</label> 
    <div class="col-lg-9"> 
     <input type="text" name="input-password" class="form-control" data-bind="value: properties().password" /> 
    </div> 
</div> 

的问题是，网页上加载淘汰赛增加has-errors类的“包装申报单”（那些form-group类）。如何在用户将某些东西输入到绑定输入后打开验证？

在你点这里之前：Knockout Validation evaluates immediately on load - 我没有验证信息出现问题，但是div添加了一个当前不应该有的类。

Answer 1

试试这个在绑定：

css: { 'form-group': true, 'has-error': !properties().username.isValid() && properties().username.isModified() } 

基本上我们检查，如果观察到已被修改，出现错误。 isModified是由ko验证自动插入的可观察项。

如果事情在你的视图模型实际上是设置可观察到空或空，（例如一些初始化代码），然后你需要：

properties().username.isModified(false) 

我没有测试过它，所以它可能需要一些调整

Answer 2

我想出了一个临时解决方案，但我不喜欢它，所以任何人有更好的主意 - 请出面:)。

this.shouldValidateUsername = ko.pureComputed(function() { 
    return !this.properties().username.isValid() && this.validationIsOn(); 
}, this); 
this.shouldValidatePassword = ko.pureComputed(function() { 
    return !this.properties().password.isValid() && this.validationIsOn(); 
}, this); 

和HTML的有趣的部分是：

<div data-bind="css: { 'form-group': true, 'has-error': shouldValidateUsername() }">(...) 

我切换validationIsOn观察到这样打开的验证和关闭。