2013-07-19 8 views
5

"İlk ad" üzerinde büyük ölçüde temel boşaltma web sitesinde (http://knockoutjs.com/documentation/extenders.html) önerilen örnek temel alınarak çok basit bir gerekli doğrulama uygulandım - Canlı örnek 2: Gözlenebilirlere onay ekleme.Genişleticiler kullanarak Knockout.js doğrulama - Yüklemede doğrulamayı önleme

Sorunum, form ilk yüklendiğinde doğrulama işleminin yapılmasını istemiyorum. "Chrome" in işleri - Aşağıda benim kod

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

Benim bu linke http://jsfiddle.net/tCP62/22/``

i sağladık JSFiddle bağlantı sorunu gösteren demo unutmayın lütfen en karşı karşıyayım konunun demo göreceksiniz olduğu ve IE'de çalışmıyor.

Lütfen bunu çözmeme yardımcı olacak bir kişi olabilir.

Selamlar, Ankush

cevap

3
Sadece aşağıdaki satırı kurtulmak ve onu istediğini yapmalıyım

: Yukarıda içerdiğinden

//initial validation 
validate(target()); 

required genişletici zaman sayfa yüklendiğinde çağrılan ve Çağrı, doğrulama işleminin hemen tetiklenmesine neden olur. target.subscribe(validate); kodunun bir sonraki satırı, gözlemlenebilir değerin (yorum tarafından belirtildiği gibi) değiştiğinde tetiklenmesini sağlar. Ve bu davada ihtiyacın olan tek şey bu.

+0

Çok teşekkür ederim ... Sadece şeylerin büyük şemasında göremedim ... Yığın taşmasına gönderilmeden önce 4 saat dün ve 4 saat kadar zaman geçirdim. Ama hey, benim günümü yaptın. Tekrar teşekkürler. –

+0

Şimdi başka bir sorunum var. Kaydetme düğmesi tıklatmasında doğrulamayı çağırmak istiyorum, böylece hataya sahip denetimlerin vurgulanması gerekir. Yukarıdakilere dayanarak, "hasError" özelliğini kaydedip kaydetmeden önce "doğrula" yöntemini çağırdım. Bununla birlikte, "firstName" üzerinde iki tane doğrulamam varsa - "gerekli" ifadesinin yanı sıra, firstName başka bir genişleticinin bulunduğu "A" ile başlamalıdır. Bu senaryoda, validate yöntemini her bir uzantıya farklı şekilde adlandırmalı ve doğrulanması gereken her bir gözlemlenebilir için tüm doğrulama yöntemlerini çağırmalı mıyım? Herhangi bir yardım çok takdir edilmektedir. –