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

我想建议不要使用jout验证和淘汰赛.原因是jQuery验证绑定到DOM,而knockout建议使用视图模型.一旦您开始在验证中添加更多依赖项,这将导致问题,例如,如果数据无效,则阻止某些行为,但您仍需要保留数据.去淘汰验证,它做得很好.