テキスト フィールドにデータ属性 (data-invalid) が無効な場合は追加し、有効な場合は削除します。html と js は次のとおりです。
<form data-bind="submit: submitFields">
First Name: <input type="text" runat="server" ID="FirstName" data-bind="value: firstName, valueUpdate: 'blur', attr: { 'data-invalid': !firstName.isValid()}"/>
<br/>
<button type="submit" >Submit</button>
</form>
var viewModel;
viewModel = function() {
self = this;
self.firstName = ko.observable().extend({
required: true,
notify: 'always'
});
//sets errors to an array of the error messages?
self.errors = ko.validation.group(this, { deep: true, observable: false })
self.submitFields = function(formElement) {
if (self.errors().length > 0) {
self.errors.showAllMessages();
return;
}
//submit
}
};
ko.applyBindings(new viewModel());
そして、それをテストするためのフィドル: http://jsfiddle.net/frontenderman/HhtEZ /2/
私の問題は、 firstName.IsValid() がページロードで実行されることです。これを回避するエレガントな方法はありますか?私が考えることができるのは、firstName をサブスクライブし、ビュー モデルの最初の実行時にフラグを使用して data-attribute を null に設定し、その後の実行で !firstName.isValid() を返すようなことです。