淘汰赛 + Jquery 验证答案

【问题标题】：Knockout + Jquery Validate淘汰赛 + Jquery 验证
【发布时间】：2011-08-09 17:49:08
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： jquery jquery-validate knockout.js

【解决方案1】：

默认情况下，jQuery Validate 会在提交时进行验证。因此，如果淘汰赛打断了这一点，即实际上并未触发onSubmit 事件，那么就可以了。您最好的选择可能是按照您在 sendToServer 函数中的一些计划 - 从您的淘汰提交事件中手动触发验证：

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

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

【讨论】：

但在我的示例中，onkeyup、focus 等也没有触发。
Validate 在第一次提交表单之前不会对keyup、focus 或任何其他事件执行任何操作。之后，所有这些事件都会为每个无效字段触发，直到它们被修复。
可能是这样，我去看看。

【解决方案2】：

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

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

【讨论】：

它不是真正的 JQuery 验证绑定，但它非常好。
我更喜欢“绑定”而不是“事物”，这是我的第二选择 :)

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案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();
    }
});

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

【讨论】：