Knockout.js使用验证扩展 - 负载prevent验证 [英] Knockout.js validation using extenders - prevent validation on load
问题描述
我已经实现的名字主要是基于例如一个非常基本的要求验证建议在淘汰赛网站（的 http://knockoutjs.com/documentation/extenders.html ） - 活生生的例子2：添加验证，可观察
I have implemented a very basic required validation on "first name" largely based on the example suggested on knockout website (http://knockoutjs.com/documentation/extenders.html) - Live example 2: Adding validation to an observable.
我的问题是，我不希望在第一次加载表单时验证开火。下面是我的code
My problem is that I don't want the validation to fire when the form is first loaded. Below is my code
<!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 /``
You will see the demo of issue I am facing at this link http://jsfiddle.net/tCP62/22/``
请注意，我所提供的试玩展示问题的jsfiddle链接 - 工作在铬，并在IE无法正常工作。
Please Note that the JSFiddle link that i have provided to demo showing the problem - works in "Chrome" and does not work in IE.
请谁能帮助我解决这个问题。
Please can anyone help me resolve this.
问候，
Ankush
Regards, Ankush
推荐答案
刚刚摆脱以下行的，它应该做你想要什么：
Just get rid of the following line and it should do what you want:
//initial validation
validate(target());
的要求扩展被调用时，你的页面加载，因为它包含了上面的调用，它会导致验证立即触发。 code target.subscribe（验证）的下一行; 确保当观察到的变化值（由注释说明）被触发。而这一切，你在这种情况下所需要的。
The required extender gets called when your page loads, and because it contains the above call, it causes the validation to trigger immediately. The next line of code target.subscribe(validate); ensures that it is triggered when the observable changes value (as stated by the comment). And that's all you need in this case.
这篇关于Knockout.js使用验证扩展 - 负载prevent验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
