Extenderを使用したKnockout.js検証

ノックアウトウェブサイト（http://knockoutjs.com/documentation/extenders.html）で提案されている例に基づいて、 "ファーストネーム"の非常に基本的な必要な検証を実装しました - 実例2：Extenderを使用したKnockout.js検証

私の問題は、フォームが最初に読み込まれたときに検証が実行されないようにすることです。「クローム」で働く - 以下は、私のコード

<!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リンクが問題を示すデモすることに注意してくださいに直面しています問題のデモを見ることができますですIEでは動作しません。

私はこれを解決するのを手伝ってください。

よろしく、 Ankush

出典

2013-07-19 ankush.net

ただ、次の行を取り除くと、それはあなたが欲しいものを行う必要があり

：それは上記の含まれているため

//initial validation 
validate(target());

requiredエクステンダーをするとき、あなたのページがロード呼び出され、コールすると、検証がすぐにトリガーされます。コードtarget.subscribe(validate);の次の行は、オブザーバブルが（コメントに記述されているように）値を変更したときにトリガーされることを保証します。この場合に必要なことはすべてです。

出典

2013-07-19 10:15:43 Robbie

ありがとうございました...私は物事の壮大な計画でそれを見ることができませんでした...スタックオーバーフローのために投稿する前に、昨日4時間と4時間を過ごしました。しかし、ねえ、あなたは私の一日を作った。ありがとうございました。 –

もう一つの問題があります。私は、エラーを持つコントロールが強調表示されるように、保存ボタンのクリック時に検証を呼び出す必要があります。上記に基づいて、私は保存前に "validate"を呼び出し、 "hasError"プロパティをチェックすることができます。しかし、 "firstName"に2つのバリデーションがある場合は、 "required"と言うだけでなく、firstNameは "A"で始まり、別のエクステンダがあるはずです。このシナリオでは、各エクステンダでバリデーションメソッドに異なる名前を付け、検証する必要がある各オブザーバブルのすべてのバリデーションメソッドを呼び出さなければなりませんか？どんな助力も非常に感謝しています。 –

Extenderを使用したKnockout.js検証

答えて

関連する問題