5
Tôi đã thực hiện xác thực yêu cầu rất cơ bản về "tên" chủ yếu dựa trên ví dụ được đề xuất trên trang web loại trực tiếp (http://knockoutjs.com/documentation/extenders.html) - Ví dụ trực tiếp 2: Thêm xác thực vào một quan sát được.Xác thực Knockout.js khi tải xuống
Vấn đề của tôi là tôi không muốn xác thực kích hoạt khi biểu mẫu được tải lần đầu tiên. Dưới đây là mã của tôi
<!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);
Bạn sẽ thấy bản demo của vấn đề tôi đang phải đối mặt tại liên kết này http://jsfiddle.net/tCP62/22/``
Xin lưu ý rằng liên kết JSFiddle mà tôi đã được cung cấp để giới thiệu cho thấy vấn đề - công trình trong "Chrome" và không hoạt động trong IE.
Xin vui lòng bất cứ ai có thể giúp tôi giải quyết vấn đề này.
Kính trọng, Ankush
Cảm ơn bạn rất nhiều ... Tôi chỉ không thể nhìn thấy nó trong kế hoạch lớn của sự vật ... Đã dành khoảng 4 giờ ngày hôm qua và 4 giờ toady trước khi gửi bài để ngăn xếp tràn. Nhưng hey, bạn đã làm cho ngày của tôi. Cám ơn bạn một lần nữa. –
Bây giờ tôi có một vấn đề khác. Tôi muốn gọi xác thực trên nút lưu nhấp để các điều khiển có lỗi được đánh dấu. Dựa trên những điều trên, tôi có thể gọi "xác thực" trước khi lưu và kiểm tra thuộc tính "hasError". Tuy nhiên điều gì sẽ xảy ra nếu tôi có hai xác nhận hợp lệ trên "firstName" - nói "required" cũng như firstName đó nên bắt đầu bằng "A" mà có một extender khác. Trong trường hợp này, tôi có phải đặt tên cho phương thức xác thực khác nhau trên mỗi bộ mở rộng và gọi tất cả các phương thức xác thực cho mỗi quan sát cần được xác thực không? Bất kỳ giúp đỡ được rất nhiều đánh giá cao. –