Validating with knockout-validation

Question

Working with knockout.js (and knockout-validation) I have this:

self.nickname = ko.observable("").extend({
    required: true,
    minLength: 3
});

and

<input type="text" data-bind="value: nickname" class="short" maxlength="30" />
<div class="formRow rowErrorMsg" data-bind="visible: nickname.isValid() == false"><span class="staticImages staticImagesError"></span> <?php text("Enter a valid username") ?></div>

but the problem is that when "nickname" its not valid then apper a text next to the input control. The DIV with the error message start visible and then work fine.

I need to do this:

when "nickname" is not valid then just display the DIV with my custom message and format.
when page is loaded then the DIV have to stay hidden.

delixfe delixfe · Accepted Answer · 2013-01-30T06:28:05

You need to configure knockout-validation to not show the error-messages. There are two ways.

The first is via binding:

<div data-bind='validationOptions: { insertMessages: false }'>
    <input type="text" data-bind="value: nickname" class="short" maxlength="30" />
    <div class="formRow rowErrorMsg" data-bind="visible: nickname.isValid() == false">
</div>

The second one is via code:

Use the ko.validation.init({ insertMessages: false }); function
Use the ko.applyBindingsWithValidation(viewModel, rootNode, { insertMessages: false }); function **contextual

A description of all configuration options can be found at: https://github.com/ericmbarnard/Knockout-Validation/wiki/Configuration

If you have many fields you have to validate you could use an messageTemplate template instead of manually creating all the errorMessage divs.

Validating with knockout-validation

1 Answers