如何使用淘汰赛自定义绑定获取 jquery 验证状态？

Question

我尝试创建没有视图信息的视图模型，例如在保存/发送数据到服务器之前直接从视图模型调用 jquery 验证。

var vm = function () {
    var self = this;

    self.password = ko.observable();
    self.save = function (form) {
       // I want to prevent any view information call directly from view model.
       if ($(form).isValid()) {
          // $.ajax({});
       }
    };
};
ko.applyBindings(new vm());

@using (Html.BeginForm(null, null, FormMethod.Post, new { data_bind = "submit: save" }))

我也不想在视图模型中手动重新创建敲除验证，因为它们已由 asp.mvc 数据注释生成为 jquery 验证属性。

[Required]
[StringLength(100, ErrorMessageResourceName = "ErrorMinStringLength", ErrorMessageResourceType = typeof(Locale), MinimumLength = 6)]
[DataType(DataType.Password)]
public string Password { get; set; }

@Html.PasswordFor(m => m.Password, new { data_bind = "value: Password" })

// Generated html in the browser view source.
<input type="password" name="Password" id="Password" data-val-required="The Password field is required." data-val-length-min="6" data-val-length-max="100" data-val-length="The Password must be at least 6 characters long." data-val="true" data-bind="value: Password">

我创建了一个简单的自定义绑定，它将更新有效状态如下。

ko.bindingHandlers.jQueryIsValid = {
    init: function (element, valueAccessor) {
        $(element).closest("form").change(function () {
            var observable = valueAccessor();
            var isValid = $(element).valid();
            observable(isValid);
        });
    }
};

然后更新html和视图模型如下。

@using (Html.BeginForm(null, null, FormMethod.Post, new { data_bind = "submit: save, jQueryIsValid: isValid" }))

var vm = function () {
    var self = this;

    self.password = ko.observable();
    self.isValid = ko.observable();
    self.save = function () {
       if (self.isValid()) {
          // $.ajax({});
       }
    };
};
ko.applyBindings(new vm());

我的观点是强制执行 mvvm 模式，因为 viewmodel 理想情况下应该不了解视图（如 $(form).dosomething）。我只是不确定上述解决方案是最好的方法。由于我是淘汰赛新手，因此我可能会错过一些关于自定义绑定或现有淘汰赛功能的信息。

任何人都可以展示正确/最佳的方法吗？

Answer 1

自定义绑定是不必要的。视图模型不需要知道表单的有效性。重点是 save 只能在有效表单上调用。此外，由于您打算用 AJAX 调用替换提交行为，因此您需要确保在单击提交按钮时表单不回发。

您可以通过以下方式实现...

$('form').submit(function(e){
    if ($(this).valid()) {
        viewModel.save();
        e.preventDefault();
    }
});