【问题标题】:Knockout-validation.js - setting required properties with jQuery fails validationKnockout-validation.js - 使用 jQuery 设置所需的属性验证失败
【发布时间】:2013-07-10 07:18:43
【问题描述】:

我在 knockout.js 中实现了一个相当常见的场景,即复制表单。用户填写“联系人”表单,然后他们可以通过单击复选框来选择在“计费”表单上使用相同的值。它使用 jQuery 遍历联系表单,并将同名的计费表单输入设置为相同的值。

这是一个精简的小提琴that shows the problem;尝试填写联系表格,然后单击“与联系信息相同”复选框。帐单将填写,但是当您单击“验证帐单”按钮时,您会看到帐单中的每个字段都未通过验证。如果您在表单中手动输入值,则验证成功。

我的问题是,为什么剔除验证没有检测到帐单表单中的值是在从联系表单复制后设置的?复制后,尽管有值,但必填字段无法验证。如何让淘汰赛验证检测到字段值已更改?

我的模型正在使用内置的淘汰验证规则:

self.errors = ko.validation.group(this, {
    deep: true,
    observable: false
});

self.firstName = ko.observable().extend({
    required: true
});

值是通过 jQuery 的 val() 设置的:

$(":input[name]", contactForm).each(function () {
    $("[name=" + $(this).attr("name") + "]", billingForm).val($(this).val());
});

测试验证的按钮很简单:

self.validateBilling = function () {
    self.errors.showAllMessages();
    if (self.errors().length == 0) {
        alert("No billing validation errors.");
    }
};

【问题讨论】:

  • 您是否尝试使用视图模型的可观察属性设置值?
  • 我没有;我是 knockoutjs 的新手,并且习惯于以某种方式做事。这是一个很难改掉的习惯。我发现淘汰赛验证必须期待更改事件,并且使用 .val() 不会触发更改事件。几分钟前,我发布了一个针对我的用例的答案。

标签: knockout.js knockout-validation


【解决方案1】:

发现问题;使用 .val() 设置输入值不会导致 onchange() 触发。设置值时触发更改即可解决问题。

    $.fn.changeVal = function (v) {
        return $(this).val(v).trigger("change");
    };

    $(":input[name]", contactForm).each(function () {
        $("[name=" + $(this).attr("name") + "]", billingForm).changeVal($(this).val());
    });

(Credit for above)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-31
    • 2016-03-13
    • 1970-01-01
    • 1970-01-01
    • 2020-06-03
    • 1970-01-01
    相关资源
    最近更新 更多