jquery - knockout + Jquery 验证

Question

我正在尝试使用 jquery validate 设置验证，并且我已经从服务器返回 View 模型，映射到客户端并成功让 knockout js 绑定(bind)一些数据。

我包含了一个验证调用，但验证永远不会触发，但是如果我在输入框中放置一个类，然后调用 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>

Answer 1

默认情况下，jQuery Validate 在提交时进行验证。因此，如果 knockout 中断了这一点，即没有实际触发 onSubmit 事件，那么就会做到这一点。您最好的选择可能是按照您在 sendToServer 函数中的计划进行操作 - 手动触发 knockout 提交事件的验证:

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

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