Knockout validationMessage appears as [object Object]

Question

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]?

Answer 1

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.