Question

我使用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>

问题是在页面加载时，将has-errors类添加到＆＃34;包装器divs＆＃34; （那些form-group类）。在用户输入绑定输入后，如何启用验证？

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

Answer 1

在绑定上试试这个：

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

基本上我们正在检查是否已修改observable以显示错误。 isModified是一个可通过ko验证自动插入的observable。

如果视图模型中的某些内容实际上将observable设置为empty或null（例如某些初始化代码），则需要：

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 observable，从而打开和关闭验证。

Knockoutjs立即验证

2 个答案: