ノックアウト + JQuery 検証 質問する

ノックアウト + JQuery 検証 質問する

jquery 検証を使用して検証を設定しようとしています。サーバーから返されたビューモデルを取得し、クライアントにマップして、ノックアウト js でデータをバインドすることに成功しました。

検証するために呼び出されましたが、検証はトリガーされませんでした。ただし、入力ボックスにクラスを配置してから valid を呼び出すと、期待どおりにトリガーされます。

何か案は?

<script type="text/javascript">
        var viewModel;
        $(document).ready(function () {
            $.ajax({
                url: 'Home/GetUserData',
                type: 'post',
                success: function (data) {
                    viewModel = ko.mapping.fromJS(data);
                    viewModel.save = function () { sendToServer(); };
                    ko.applyBindings(viewModel);
                    main();
                }
            });
        });

        function main() {
            $("form").validate({
                rules: {
                    birthPlace: {
                        required: true,
                        minlength: 2
                    }
                }
            });
        }

        function sendToServer() {
            alert($("form").valid());
        }

    </script>
}
<h2>@ViewBag.Message</h2>
<form id="nameSubmit" action="">
    <div>
        The name is: <span id="test" data-bind="text: Name"></span>
    </div>
    <div>
        He's <span id="age" data-bind="text: Age"></span>
    </div>
    <div>
        He's from
        <input type="text" id="birthPlace" name="birthPlace"/>
    </div>
    <div>
        <button data-bind="click: save">Click Me</button>
    </div>
</form>

ベストアンサー1

デフォルトでは、jQuery Validate は送信時に検証を行います。したがって、ノックアウトがそれを中断している場合、つまり実際にonSubmitイベントをトリガーしていない場合は、それが実行されます。最善の策は、sendToServer 関数で計画していたように、ノックアウト送信イベントから手動で検証をトリガーすることです。

if (!$('form').valid()){
    $('form').showErrors();
    return false;
}

//otherwise, get on with whatever knockout needs to do
...
return true;

おすすめ記事