使用扩展器进行 Knockout.js 验证 - 防止加载验证答案

【问题标题】：Knockout.js validation using extenders - prevent validation on load使用扩展器进行 Knockout.js 验证 - 防止加载验证
【发布时间】：2013-07-18 14:01:04
【问题描述】：

我已经根据淘汰网站 (http://knockoutjs.com/documentation/extenders.html) 上建议的示例对“名字”实施了一个非常基本的必需验证 - 现场示例 2：向可观察对象添加验证。

我的问题是我不希望在首次加载表单时触发验证。下面是我的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<p data-bind="css: { error: firstName.hasError }">
    <span>First Name</span>
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'></span>
</p>
<p>
    <span>Last Name</span>
    <input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown'" />
</p>

<div data-bind="text: fullName" />
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/knockout-2.3.0.debug.js"></script>
<script src="script.js"></script>
</body>
</html>

var AppViewModel = function () {
var firstName = ko.observable().extend({ required: "Please enter First Name" }),
    lastName = ko.observable(),
    fullName = ko.computed(function () {
        return firstName() + " " + lastName();
    });
return {
    firstName: firstName,
    lastName: lastName,
    fullName: fullName
};
};


ko.extenders.required = function (target, overrideMessage) {
//add some sub-observables to our observable
target.hasError = ko.observable();
target.validationMessage = ko.observable();

//define a function to do validation
function validate(newValue) {

    target.hasError($.trim(newValue) ? false : true);
    target.validationMessage($.trim(newValue) ? "" : overrideMessage || "This field is    required");
}

//initial validation
validate(target());

//validate whenever the value changes
target.subscribe(validate);

//return the original observable
return target;
};



var viewModel = new AppViewModel();
ko.applyBindings(viewModel);

您将在此链接http://jsfiddle.net/tCP62/22/``看到我面临的问题演示

请注意，我提供给演示的 JSFiddle 链接显示了问题 - 在“Chrome”中有效，在 IE 中无效。

请谁能帮我解决这个问题。

问候，安库什

【问题讨论】：

标签： javascript validation knockout.js asp.net-web-api

【解决方案1】：

只要去掉下面这行，它就会做你想做的事：

//initial validation
validate(target());

required 扩展器在您的页面加载时被调用，并且由于它包含上述调用，它会导致立即触发验证。下一行代码target.subscribe(validate); 确保在可观察值更改时触发它（如注释所述）。在这种情况下，这就是您所需要的。

【讨论】：

非常感谢...我只是在宏伟的计划中看不到它...昨天花了大约 4 个小时，今天花了 4 个小时才发布到堆栈溢出。但是，嘿，你让我开心。再次感谢您。
现在我有另一个问题。我想在单击保存按钮时调用验证，以便突出显示有错误的控件。基于上述，我可以在保存之前调用“验证”并检查“hasError”属性。但是，如果我在“firstName”上有两个验证 - 说“required”，并且 firstName 应该以“A”开头，并且有另一个扩展器。在这种情况下，我是否必须在每个扩展器上以不同的方式命名 validate 方法，并为每个需要验证的 observable 调用所有 validate 方法？非常感谢任何帮助。