Javascript Knockoutjs即时验证

我已经使用AMD创建了一个knockoutjs应用程序。现在我有点被验证卡住了。以下是ViewModel代码：

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>

define（['knockout'，'hasher'，'text！。/login window.html']，
函数（ko、hasher、templateMarkup）{
"严格使用",；
函数LoginWindowViewModel（参数）{
//可观测
this.properties=ko.validatedObservable({
用户名：ko.observable（）.extend({
必需：{消息：'请提供您的用户名'}
}),
密码：ko.observable（）.extend({
必需：{消息：“请提供密码”}
})
});
}
返回{viewModel:LoginWindowViewModel，template:templateMarkup}；
});
用户名
密码

问题是，在页面加载时，knockout将

has errors

类添加到“包装器div”（那些带有

表单组的类）。用户在绑定输入中键入内容后，如何启用验证

在您指出我之前：-我对显示验证消息没有问题，但是当div被添加到一个此时不应该有的类时。
我想出了一个临时解决方案，但我不喜欢它，所以任何有更好想法的人-请站出来：）

html有趣的部分是：

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

（…）

我正在切换可观察的
验证，从而打开和关闭验证。
在绑定上尝试以下操作：

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

基本上，我们正在检查observable是否已被修改以表示错误。
isModified是通过ko验证自动插入的可观察对象

如果视图模型中的某些内容实际将可观测值设置为空或空（例如某些初始化代码），则需要：

properties().username.isModified(false)

我还没有测试它，因此可能需要一些调整
如果您只是想影响显示，那么这样做如何：添加一个
css:{showValidation:hasBeenSubmitted}
绑定到您的表单。第一次提交表单后，将
hasBeenSubmitted
observable设置为true。像这样定义CSS
.showValidation.has error{…}
。这样
.has error
在页面加载时不起作用。您不必添加任何自定义逻辑，只需在主视图模型上添加一个额外的可观察对象。当然，您可以实现一个
hasBeenModified
observable，而不是
hasBeenSubmitted
。
properties().username.isModified(false)