淘汰赛验证不显示 ko.validatedObservable 的错误答案

【问题标题】：Knockout validation doesn't show errors for ko.validatedObservable淘汰赛验证不显示 ko.validatedObservable 的错误
【发布时间】：2018-03-28 08:00:39
【问题描述】：

我定义了一个已验证的Observables 列表。例如其中之一：

self.CompanyName = ko.observable().extend({ required: true });
self.ContactPerson = ko.observable().extend({ required: true });
self.step1Validation = ko.validatedObservable([
        self.CompanyName,
        self.ContactPerson
    ]);

除了“必需”验证器之外，我还有其他验证器。例如，电子邮件验证器。当用户输入错误的电子邮件并移动到另一个字段时，会出现红色错误消息。这意味着会生成错误消息并出现在附近的控件中。

但是，当我尝试一次验证所有已验证的Observable 时，错误消息不会出现在控件附近。如何解决这个问题？

验证看起来像这样（这是self函数）：

  if (self.step1Validation.isValid()) {
      return true;
  } else {
      // SHOULD SOMEHOW SHOW ALL ERROR MESSAGE FOR THIS STEP (step1Validation)
      return false; // this doens't allow user to move to next step in wizard
  }

编辑这是一些简化的 jsfiddler 示例：http://jsfiddle.net/ng73s0hq/1/

在此示例中，如果您添加了错误的电子邮件并移动到另一个字段，那么您会看到“红色错误消息”。但是如果按“提交”则验证失败，但没有错误信息（应该是要求失败+邮箱验证失败）。

【问题讨论】：

你可以为它制作jsfiddle吗？
jsfiddle.net/ng73s0hq/1 在此示例中，如果您添加了错误的电子邮件并移动到另一个字段，那么您会看到“红色错误消息”。但是如果你只是按“提交”然后验证失败，但没有错误消息（应该是要求失败+电子邮件验证失败）。

标签： validation knockout.js

【解决方案1】：

您需要做的就是点击您应该调用此self.step1Validation.errors.showAllMessages() 以显示错误消息。

简化版viewModel：

ko.validation.init({
    insertMessages: false
});

var patterns = {
    email: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/
};

var ViewModel = function () {
    var self = this;
    self.CompanyName = ko.observable();
    self.ContactPerson = ko.observable();
    self.Email = ko.observable();

    self.test = ko.observable();

    self.step1Validation = ko.validatedObservable([
    self.CompanyName.extend({
        required: true
    }),
    self.ContactPerson.extend({
        required: true
    }),
    self.Email.extend({
        required: true,
        pattern: {
            message: 'Must be a valid email',
            params: patterns.email
        }
    })]);

    self.clickDone = function () {
        if (self.step1Validation.isValid()) {
            self.test('valid');
            return true;
        } else {
            self.test('invalid');
            self.step1Validation.errors.showAllMessages()
            return false;
        };
    };
};

var model = new ViewModel();
ko.applyBindings(model);

工作示例here

【讨论】：

【解决方案2】：

您需要先验证您的 ko.validatedObservable 对象，如果无效则使用 showAllMessages(true) 方法显示验证错误。

var result = ko.validation.group(self.step1Validation, {deep: true});  
if (self.step1Validation.isValid()) {
      return true;
  } else {
        result.showAllMessages(true);
      // SHOULD SOMEHOW SHOW ALL ERROR MESSAGE FOR THIS STEP (step1Validation)
      return false; // this doens't allow user to move to next step in wizard
  }

【讨论】：