敲除ValidationMessage绑定不显示消息

Question

我试图在表单的许多部分上使用knockout.validation。所有这些都很好，可以使用内置的message，但我有一个特定的字段，需要自己手动将消息添加到DOM中。

不过，我真的很难让它发挥作用，因为如果没有改变这个领域，我就无法显示文本。我已经模拟了一个非常小的例子，以尽可能接近更大的形式。

我所看到的行为：

• 单击submit可以正确运行验证(在输入周围添加红色边框)，但它不像应该显示的那样显示错误消息。
• 在密码框中输入一些内容，然后将其清空，然后点击submit将正确地显示错误消息和红色边框。

由于我正在尝试引入一个必需的字段--我不能保证字段已经被修改过，所以我需要确保第一个案例能够正常工作。有人能看出我做错了什么吗？

​

ko.validation.init({
  registerExtenders: true,
  messagesOnModified: true,
  insertMessages: true,
  decorateInputElement: true,
  decorateElementOnModified: false,
  errorElementClass: "is-invalid",
  messageTemplate: "inline_error"
}, true);

const viewModel = {};
viewModel.submitted = ko.observable(false);
viewModel.clicked = () => { viewModel.submitted(true); };
const onlyIf = ko.computed(() => viewModel.submitted());

viewModel.user = {
  password: ko.observable().extend({
    required: {
      message: `password is required.`,
      onlyIf,
    }
  })
};

ko.applyBindings(viewModel);

.is-invalid {
  border: thick solid red;
}

.text-danger {
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<div id="domTest">
  <button type="button" data-bind="click: clicked">Submit</button>

  <input type="password" class="form-control" id="password" placeholder="Password" data-bind="validationOptions:{ insertMessages: false }, textInput: user.password">
  <div class="text-danger error-message" data-bind="validationMessage: user.password" />
</div>

​

Answer 1

在这个Github问题中，validationMessage不运行于初始绑定，stevegreatrex说，您需要将messagesOnModified更改为false：

messagesOnModified: false

从这个问题的答案只有在对象没有功能和模式验证的情况下才能进行敲除验证 (由steve编写)，您需要更改计算出来的onlyIf：

viewModel.onlyIf = ko.computed(() => viewModel.submitted());

然后将viewModel.user中的属性viewModel.onlyIf更改为指向计算的viewModel.onlyIf。

viewModel.user = {
  password: ko.observable().extend({
    required: {
      message: `password is required.`,
      onlyIf: viewModel.onlyIf(),
    }
  })
};

希望这能有所帮助。

​

ko.validation.init({
  registerExtenders: true,
  //messagesOnModified: true,
  messagesOnModified: false,	
  insertMessages: true,
  decorateInputElement: true,
  decorateElementOnModified: false,
  errorElementClass: "is-invalid",
  messageTemplate: "inline_error"
}, true);

const viewModel = {};
viewModel.submitted = ko.observable(false);
viewModel.clicked = () => { viewModel.submitted(true); };
viewModel.onlyIf = ko.computed(() => viewModel.submitted());

viewModel.user = {
  password: ko.observable().extend({
    required: {
      message: `password is required.`,
      onlyIf: viewModel.onlyIf(),
    }
  })
};

ko.applyBindings(viewModel);

.is-invalid {
  border: thick solid red;
}

.text-danger {
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<div id="domTest">
  <button type="button" data-bind="click: clicked">Submit</button>

  <input type="password" class="form-control" id="password" placeholder="Password" data-bind="validationOptions:{ insertMessages: false }, textInput: user.password">
  <div class="text-danger error-message" data-bind="validationMessage: user.password" />
</div>

​