【问题标题】:KnockoutJS form validation always return validKnockoutJS 表单验证始终返回有效
【发布时间】:2014-01-28 12:27:23
【问题描述】:

我有一个表格:

并实现 KnockoutJS Validation。一切都是按照文档应用的,但即使我留下空白字段等,它也总是返回有效的。

这是代码:

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

var initialData = [
    { firstName: "John", fathersLast: "Smith", country : ""
    }
];

var Contact = function (contact) {
            var self = this;
            self.firstName = ko.observable(contact.firstName ).extend({ required: true,  message: '* required'  });;
            self.fathersLast = ko.observable(contact.fathersLast ).extend({ required: true, message: '* required'  });;
    self.country = ko.observable(contact.country ).extend({ required: true, minLength: 2, message: '* required'  });
        };

var ContactsModel = function(contacts) {
    var self = this;

    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(i) {
        return new Contact(i);
    }));


    self.errors = ko.validation.group(self.contacts);

    self.addContact = function() {

        if (self.errors().length == 0) {
            alert('Thank you.');
        } else {
            alert('Please check your submission.');
            self.errors.showAllMessages();
        }

        self.contacts.push({
            firstName: "",
            fathersLast: "",
            country: ""
        });
    };

    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };
};

ko.applyBindings(new ContactsModel(initialData));

下面是工作示例:http://jsfiddle.net/8Hude/3/

任何线索为什么它不能正常工作?

谢谢。

【问题讨论】:

  • 您是如何实现验证的?您指的是哪些文档?
  • 我只是让它工作......但添加的新元素没有验证......也许我需要为它们订阅验证但我不知道如何。 jsfiddle.net/8Hude/6
  • 我相信这个问题已经在关于这个实现的original问题中得到解决。

标签: json knockout.js knockout-validation


【解决方案1】:

如前所述,验证插件将是最优雅、更少创新的解决方案。

编辑:使用验证插件实现评论后

除此之外,您还有几个选择。

如果您确信联系人对象将始终只包含必填字段,则不是很健壮的实现将遍历联系人的属性以确保每个属性都有一些价值。

更强大一点,但仍然缺乏插件的优雅,实现将是维护一个必填字段数组并使用该数组进行验证。您可以参考我的示例进行此设置。本质上,每个必需的属性都映射到可观察对象。对任何 observable 属性值的更改都会触发(通过订阅)对计算中使用的虚拟 observable 的突变调用。这是必需的,因为计算的不能调用 valueHasMutated。突变调用触发计算重新评估,从而更新 UI。

【讨论】:

    猜你喜欢
    • 2012-08-27
    • 1970-01-01
    • 2021-12-06
    • 2023-03-30
    • 1970-01-01
    • 2016-04-23
    • 1970-01-01
    • 2014-02-10
    • 1970-01-01
    相关资源
    最近更新 更多