Knockout + Jquery Validate

Question

我正在尝试使用jquery validate进行验证，我的视图模型已经从服务器返回，并映射到客户端，并成功地使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>

- RubbleFord

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;

- Ryley

---

但是在我的例子中，onkeyup、focus等也没有触发。 - RubbleFord

Validate在keyup、focus或任何其他事件中并不起作用，直到表单的第一次提交。在那之后，所有这些事件会针对每个无效字段触发，直到它们被修正。 - Ryley

可能就是这样，我来看看。 - RubbleFord

Answer 2

现在有一个很实用的jQuery验证绑定——Knockout，我认为它非常有用:

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

- Richard

---

这不是真正的 JQuery 验证绑定，但它非常好。 - gliljas

我更喜欢“binding”而不是“thingy”，尽管后者是我的第二选择 :) - Richard

Answer 3

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

- Gudlaugur Egilsson

Answer 4

我一直在使用 validate() 中的 submitHandler 选项：

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

在表单中，只需使用标准的<input type="submit">，jQuery验证将捕获事件，验证并在有效时调用viewModel上的处理程序。

- craigb

Answer 5

jQuery Validation只在表单提交事件上执行验证（如Ryley的答案所述）是正确的。因此，如果您使用Knockout样式的data-bind="click:modelSubmit"，这将防止表单提交触发（默认情况下），从而防止jQuery Validation执行任何操作。

您有两个选择。第一种方法是从modelSubmit()返回true，这将使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();
    }
});

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

- MikeBeaton