Knockout ValidationMessage绑定不显示消息

时间:2018-04-19 07:46:40

标签: javascript knockout.js knockout-validation

我正在尝试在表单的多个部分使用knockout.validation。大部分都工作正常,可以使用内置的消息appender,但我有一个特定的字段,我需要自己手动添加消息到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 个答案:

答案 0 :(得分:1)

在此Github问题validationMessage does not run on initial binding中,stevegreatrex表示您需要将messagesOnModified更改为false:

messagesOnModified: false

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

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

然后更改onlyIf中的属性viewModel.user以指向计算出的viewModel.onlyIf

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

希望这有帮助。

&#13;
&#13;
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);
&#13;
.is-invalid {
  border: thick solid red;
}

.text-danger {
   color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;