Knockout ValidationMessage 绑定不显示消息

Posted 2023-03-27

【中文标题】Knockout ValidationMessage 绑定不显示消息

【英文标题】：Knockout ValidationMessage binding not displaying message

【发布时间】：2018-09-29 15:02:56

【问题描述】：

我正在尝试在表单的多个部分使用knockout.validation。其中大部分工作正常，可以使用内置的消息附加程序，但我有 1 个特定字段，我需要自己手动将消息添加到 DOM。

我在让它工作时遇到了一个真正的问题，因为如果该字段没有发生变化，我根本无法显示文本。我已经模拟了一个非常小的示例，以尽可能接近更大的形式来说明。

我看到的行为：

点击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>

【参考方案1】：

在这个 Github 问题中，validationMessage does not run on initial binding，stevegreatrex 说您需要将 messagesOnModified 更改为 false：

messagesOnModified: false

从这个问题的答案Knockout Validation onlyif object no function and pattern validation (by steve-greatrex) 你需要改变onlyIf 计算：

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

然后将viewModel.user中的属性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>

【讨论】：

谢谢 - 可观察的 onlyIf 在我的复制中是一个错误 - 这在我的实际代码中是不可观察的。我显然误解了messagesOnModified 的作用，因为我认为我需要继续点击提交来刷新错误——但事实并非如此。再次感谢:)

很高兴为您提供帮助。 @Ian，如果你想删除这个问题，请继续。