ダイアログを開いたり閉じたりするたびに(ノックアウトカスタムバインディングの一部として)作成および破棄されるjQuery UIダイアログ内にあるフォームがあります。問題は、ダイアログが最初に開いたときに jQuery 検証が機能するが、ダイアログを閉じてから再度開くと機能しないことです。
以下は、jQuery UI ダイアログ内にあるフォームの簡略化されたスニペットです。
<div id="product-panel" data-bind="dialog: { autoOpen: false, destroyOnClose: true }, showDialog: $parent.selectedProduct">
<form data-bind="submit: saveMe" id="product-form" method="post">
<label>
Name
<input type="text" id="productName" name="productName" data-bind="value: productName">
</label>
<button type="submit" class="button">save</button>
</form>
</div>
ko.bindingHandlers.dialog の内容も表示したいと思いますが、実際には問題に関連しているとは思いません。ダイアログのカスタム バインディングについて知っておくべきことの 1 つは、jQuery UI ダイアログが閉じられるたびに破棄されるように構成されていることです。
ダイアログが再び開くたびに、jQuery の on() メソッドを使用して、validate をフォームに再バインドします。
$("body").on("dialogopen", "#product-panel", function(event) {
$('#product-form').validate({
rules: {
productName: {
required: true
}
}
});
});
何かご意見は?ああ、ノックアウト検証は使いたくありません (他の理由から)。
jquery 2.0、jquery ui 1.9.2、jquery 検証 1.11.1、ノックアウト 2.2.0