gpt4 book ai didi

javascript - Knockout ValidationMessage 绑定(bind)不显示消息

转载 作者:行者123 更新时间:2023-12-03 02:03:30 27 4
gpt4 key购买 nike

我正在尝试在表单的多个部分上使用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>

最佳答案

在此 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());

然后将 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>

关于javascript - Knockout ValidationMessage 绑定(bind)不显示消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49915484/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com