Knockout + Jquery Validate

Question

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

我包含了一个validate调用，但是验证永远不会触发，但是如果我在输入框上放了一个类，然后调用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在提交时进行验证。因此，如果基因敲除中断了这一过程，即没有真正触发onSubmit事件，那就可以了。最好的办法可能是按照您在sendToServer函数中所计划的那样去做——从knockout提交事件手动触发验证:

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

我不建议在knockout中使用jQuery验证。原因是jQuery validate绑定到DOM，而knockout建议使用视图模型。一旦您开始在验证上添加更多依赖项，这将导致问题，例如，如果数据无效，但您仍然需要保留数据，则会阻止某些行为。选择敲除验证，它做得非常好。

Answer 4

我一直在validate()上使用submitHandler选项:

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

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

Answer 5

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

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

第二种——也是最可能是你想要的——是完全放弃data-bind="click"，而使用jQuery验证提交处理程序(https://jqueryvalidation.org/validate)。

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

这个处理程序只在验证成功后才被调用。