Knockout验证 - 当输入为空时不进行验证 + 在提交时进行评估

Question

请查看这个示例：

http://jsfiddle.net/bhzrw01s/

我想要做两件事：

第一：当字段为空时不进行验证。我知道有一个onlyif选项，但是否有更简单的方法？

第二：我需要在单击提交按钮时运行验证（如果您测试我的示例，错误消息将弹出，但不会应用errorClass css）。

谢谢:D

css：

input.error {
    color: red;
    border-color: red;    
}

js:

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error',
    messagesOnModified: false    
});

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable().extend({
        required: true
    });
    self.password = ko.observable().extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {
            alert('No errors');
        } else {
            this.errors().forEach(function(data) {
               alert(data);
        });
            //self.errors.showAllMessages(true);
        }
    }

}
$(function () {
    ko.applyBindings(new SignInViewModel());
});

html :

<form>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>User name: <input data-bind='value: userName' type="text"/></label><br/>
    <label>Password: <input data-bind='value: password' type="password"/></label>

</fieldset>
<button type="button" data-bind='click: login'>Login</button>
</form>

- ddacrs

---

你的第一个问题并没有太多意义。你想要这些字段是必填的，但只有在它们不为空时才进行验证。这违背了“required”检查的目的；它只会在字段为空时失败。所以请再明确一下 :)第二个问题可以通过在你的字段组上使用ko.validatedObservable来解决，并在提交之前调用isValid()。这将检查表单是否填写正确，同时显示现有的错误并添加错误类等。请参见https://github.com/Knockout-Contrib/Knockout-Validation#getting-started - Hans Roerdinkholder

谢谢答复，我的第一个问题是如何在检查isValid()时应用CSS？因为我可以通过将insertMessages设置为false来处理消息（失去焦点的元素不会显示验证）。你有什么想法吗？ :D - ddacrs

啊，现在我明白了。但不幸的是，我不知道你如何实现这个。 - Hans Roerdinkholder

Answer 1

第一个解决方案可以完成你所要求的90%。它不会显示任何验证信息，直到用户提交表单或删除先前填写的字段。一旦他们打破了这个“封印”，他们就会立即收到该字段的实时验证反馈。这是我会使用的解决方案，因为这正是 knockout 验证的预期行为。 http://jsfiddle.net/k08m4dfx/

    self.login = function (e) {
        if (self.errors().length > 0) {
            self.errors.showAllMessages(true);
            this.errors().forEach(function(data) {
               alert(data);
            });
        }
    }

如果由于某些原因必须延迟所有验证反馈直到单击，那么您可以调整isModified标志来获得所需的行为。但这对我来说似乎有点笨拙。 http://jsfiddle.net/zd97gjg4/

    ko.extenders.deferValidation = function (target, option) {
        if (option) {
            target.subscribe(function(){
                target.isModified(false);
            });
        }

        return target;
    };

    self.userName = ko.observable().extend({
        required: {message: 'User name is required' },
        deferValidation: true
    });

    self.password = ko.observable().extend({
        required: {message: "Password is required" },
        deferValidation: true
    });

- Derpy