英文:
Knockout validationMessage appears as [object Object]
问题
使用Knockout，我想控制验证消息显示在屏幕的位置。但是当我这样做时，消息文本不显示，而是显示[object Object]。以下是我的代码：
HTML
<input id="inputValue" class="form-control form-control-xs" data-bind="validationElement: val, event: { keyup: maskNumber(event) }" placeholder="Enter Secret Number" />
<p class="validationMessage" data-bind="validationMessage: val"></p>
<!-- 用于存储真实值的隐藏输入字段 -->
<span>
<input id="realInputValue" type="hidden" data-bind="validationOptions: {insertMessages: false}, value: val" />
</span>
TS
this.val.extend(
{
maxLength: 5,
minLength: 5,
required: { message: 'This number is required' },
pattern: {
params: /^\d+$/,
message: 'Please enter only numeric digits'
}
});
我希望底部隐藏输入字段的错误消息出现在顶部可见输入字段的下方。
maskNumber函数将inputValue字段中的每个数字转换为星号(*)，然后将实际数字存储在隐藏的"realInputValue"字段中。
我已经查看了此示例和文档以及其他资源，但无论我尝试什么，当我尝试使用validationMessage时，我都看到错误消息为[object Object]。当我不使用validationMessage并让错误消息按其默认位置显示时，我可以正常看到错误消息的文本。
我该如何使实际消息显示而不是[object Object]？
英文:
Using Knockout, I want to control where the validation message appears on the screen. When I do, instead of the message text showing up, the message displays [object Object]. Here is my code:
HTML
<input id="inputValue" class="form-control form-control-xs data-bind="validationElement: val""
data-bind="event: { keyup: maskNumber(event) }"
placeholder="Enter Secret Number"
/>
<p class="validationMessage" data-bind="validationMessage: val"></p>
@*hidden input to store field to store real value*@
<span >
"<input id="realInputValue" type="hidden" data-bind="validationOptions: {insertMessages: false}, value: val" />
</span>
TS
this.val.extend(
{
maxLength: 5,
minLength: 5,
required: { message: 'This number is required' },
pattern: {
params: /^\d+$/,
message: 'Please enter only numeric digits'
}
});
I want the error message for the hidden input field on the bottom to appear underneath the visible input field at the top.
The maskNumber function turns each digit in the inputValue field into an asterisk(*), after storing the actual digit in the hidden "realInputValue" field.
I've looked at this example and used the documentation as well as other resources but no matter what I try, I keep seeing the error message as [object Object] when I try to use validationMessage. When I don't use validationMessage and let the error message go to its default placement, I can see the text of the error message just fine.
How can I make the actual message appear instead of [object Object]?
答案1
得分: 1
在深入查看代码后，我找到了问题。包含错误消息的段落不应该是<p class="validationMessage" data-bind="validationMessage: val"></p>。
而应该是<p class="validationMessage" data-bind="validationText: val"></p>。
实质上，您需要使用validationText而不是validationMessage。我在文档中没有找到这方面的信息。希望这对某人有所帮助。
英文:
After looking deep in the code, I found the issue. The paragraph including the error message should NOT be <p class="validationMessage" data-bind="validationMessage: val"></p>.
Instead it should be <p class="validationMessage" data-bind="validationText: val"></p>.
In essence, you need to use validationText instead of validationMessage. I had not found this anywhere in the documentation. Hopefully this helps someone.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论