Knockout + Jquery验证

Question

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

我包含了一个调用验证，但验证永远不会触发，但是如果我在输入框上放置一个类然后调用有效的触发按预期触发。

有什么想法吗？

<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会在提交时进行验证。因此，如果淘汰赛中断了这一点，即实际上没有触发onSubmit事件，那就会做到这一点。您最好的选择可能是在您的sendToServer函数中进行一些计划 - 从您的淘汰赛提交事件中手动触发验证：

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

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

Answer 2

现在有一个淘汰jQuery验证绑定，我觉得非常有用：

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

Answer 3

我想建议不要在淘汰赛中使用jQuery验证。原因是jQuery验证绑定到DOM，而knockout建议使用视图模型。一旦您开始在验证中添加更多依赖项，这将导致问题，例如，如果数据无效，则阻止某些行为，但您仍需要保留数据。转到knockout validation，它可以很好地完成工作。

Answer 4

我一直在validate（）上使用submitHandler选项：

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

在表单上，​​只需使用标准<input type="submit">，jQuery验证将获取事件，验证，如果有效，将在viewModel上调用您的处理程序。

Answer 5

jQuery Validation只对表单提交事件进行验证是正确的（根据Ryley的回答）。所以如果你使用Knockout样式data-bind="click:modelSubmit"这将阻止表单提交被触发（默认情况下），因此阻止jQuery验证做任何事情。

您有两种选择。第一个是从true返回modelSubmit()，这将使Knockout触发表单提交（但 modelSubmit完成后仅）（http://knockoutjs.com/documentation/click-binding.html ）。

第二个 - 也就是你想要的 - 很可能是完全不使用data-bind="click"而是使用jQuery Validation提交处理程序（https://jqueryvalidation.org/validate）。

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

只有在验证成功后才会调用此处理程序。