淘汰赛验证 - 空时不验证输入 + 提交时评估答案

【问题标题】：Knockout Validation - Dont validate input when empty + evaluate when submit淘汰赛验证 - 空时不验证输入 + 提交时评估
【发布时间】：2014-11-04 10:16:06
【问题描述】：

检查这个小提琴：

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>

【问题讨论】：

你的第一个问题真的没有意义。您希望这些字段是必需的，但仅验证它们是否为空。这违背了required 检查的目的；只有当字段为空时它才会失败。所以请再澄清一点:) 第二个问题可以通过在您的字段组上使用ko.validatedObservable 并在提交之前调用isValid() 来解决。这将检查表单是否填写正确，还会显示现有错误并添加错误类等。见github.com/Knockout-Contrib/Knockout-Validation#getting-started
感谢您的回答，我的第一个问题是关于如何仅在检查 isValid() 时应用 css？因为我可以将设置为 false 的消息处理为 insertMessages（失去焦点的元素不会显示验证）。你有什么主意吗？ :D
啊，现在我明白了。但不幸的是，我不知道你是如何做到这一点的。

标签： knockout.js knockout-validation

【解决方案1】：

第一个解决方案将完成您所要求的 90%。在用户点击提交或删除之前填充的字段之前，它不会显示任何验证。一旦他们打破封印（可以这么说），他们将收到该领域的实时验证反馈。这是我将使用的解决方案，因为它是淘汰验证的预期行为方式。

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
    });

【讨论】：