web-dev-qa-db-ja.com

ノックアウト+ Jquery検証

Jquery validateを使用して検証をセットアップしようとしていますが、サーバーからビューモデルが返され、クライアントにマップされ、一部のデータをバインドするノックアウト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>
jqueryjquery-validateknockout.js
19
RubbleFord

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

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

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

ノックアウトのjQuery検証バインディングがあります。これは非常に便利です。

https://github.com/Knockout-Contrib/Knockout-Validation

18
Richard

ノックアウトでjQuery検証を使用しないことをお勧めします。その理由は、jQueryの検証がDOMにバインドするのに対し、ノックアウトはビューモデルでの作業を推奨しているためです。これにより、検証への依存関係を追加し始めると、データが無効な場合に特定の動作を防ぐなどの問題が発生しますが、それでもデータを保持する必要があります。 ノックアウト検証 に移動します。これは非常にうまく機能します。

11
Gudlaugur Egilsson

私はvalidate（）でsubmitHandlerオプションを使用しています：

$("#myform").validate({
 submitHandler: function(form) {
   viewModel.sendToServer()
 }
});

フォームで、標準の<input type="submit">を使用するだけで、jQuery検証がイベントを取得して検証し、有効な場合はviewModelでハンドラーを呼び出します。

2
craigb

JQuery Validationがフォーム送信イベントでのみ検証を行うのは正しいことです（Ryleyの回答による）。したがって、ifノックアウトスタイル_data-bind="click:modelSubmit"_を使用すると、フォーム送信が（デフォルトで）実行されなくなり、jQuery検証が何も実行されなくなります。

2つのオプションがあります。 1つ目は、modelSubmit()からtrueを返すことです。これにより、Knockoutはフォームを送信します（ただし、afterのみ） modelSubmitが終了しました）（ http://knockoutjs.com/documentation/click-binding.html ）。

2番目（そしておそらくあなたが望むもの）は、_data-bind="click"_を完全に省略し、代わりにjQuery検証送信ハンドラーを使用することです（ https://jqueryvalidation.org/validate ）。

_$("#myform").validate({
    submitHandler: function(form) {
        viewModel.modelSubmit();
    }
});
_

このハンドラーは、検証が成功した場合にのみ呼び出されます。

1
Mike Beaton