Can not configure knockout-validation for messageTemplate

Question

Knockout validation prints the error messages in black color. But I want it in my style. And in my application, I want all validation messages should be in same style. For this I am trying to configure knockout-validation using the following template and command.

When I bind my viewmodel, I am getting the error message that I put below. What is my mistake? What/ what step am I missing?

Any help highly appreciated.

Thanks in advance.

<script type="text/html" id="errMsg">
    <span class="alert-danger"
          data-bind="if: field.isModified() && !field.isValid(),
                     text: field.error, 
                     attr: { title: field.error }">*</span>
</script>
<script type="text/javascript">
    ko.validation.init({ messageTemplate: 'errMsg' });
</script>

I get the following message.

Message: Multiple bindings (if and text) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.

Answer 1

If you want to use your own Css for the validation message, just set the errorMessageClass config property.

ko.validation.init( { errorMessageClass: "yourCssClass" } );

Check the doc here

As per your error, you can avoid it by replacing the if binding with a visible binding:

<script type="text/html" id="errMsg">
    <span class="alert-danger"
          data-bind="visible: field.isModified() && !field.isValid(),
                     text: field.error, 
                     attr: { title: field.error }">*</span>
</script>