Knockout.js and knockout-validations not working together

Question

I've been using Knockout a bit and tried now to use the separate validation-library with it. My ko-version is 3.3.0 and knockout-validation is 2.0.3, so they should be up to date. I'm running this simple example with Chrome that is presented in https://github.com/Knockout-Contrib/Knockout-Validation:

var myViewModel = ko.validatedObservable({
  property1: ko.observable().extend({ required: true }),
  property2: ko.observable().extend({ max: 10 })
});

console.log(myViewModel.isValid()); //false

myViewModel().property1('something'); 
myViewModel().property2(9);

console.log(myViewModel.isValid()); //true

However when running that locally in Chrome it gives me true for both isValid()-calls, so even though it is required and it's empty, it's valid. Some of the validations are working however:

var myViewModel = ko.validatedObservable({
  property: ko.observable().extend({ min: 10 })
});
myViewModel.isValid() // true, should be false though I guess?
myViewModel().property("test")
myViewModel.isValid() // false

What could be wrong there? Both libraries are in pretty heavy use and are the most recent versions, so I can't see why the examples aren't working.

JotaBe JotaBe · Accepted Answer · 2015-10-27T10:05:43

In this code snippet you can see that Konockput 3.0 (3.3.0 doesn't already exists) and Ko.Validation 2.0.3 work fine together:

ko.validation.init({
    messagesOnModified: false,
    insertMessages: true,
});


// View model 1

var myViewModel1 = ko.validatedObservable({
  property1: ko.observable('').extend({ required: true}),
  property2: ko.observable().extend({ max: 10 })
});

console.log('Should be false: ', myViewModel1.isValid());
$('#messages').append('Should be false: ' + myViewModel1.isValid() + '\n');

myViewModel1().property1('something'); 
myViewModel1().property2(9);

console.log('Should be true', myViewModel1.isValid());
$('#messages').append('Should be true: ' + myViewModel1.isValid() + '\n\n');

ko.applyBindings(myViewModel1, vm1);


// View model 2

var myViewModel2 = ko.validatedObservable({
  property: ko.observable().extend({ min: 10 })
});

myViewModel2().property(5);
console.log('Should be false', myViewModel2.isValid());
$('#messages').append('Should be false: ' + myViewModel2.isValid() + '\n');

myViewModel2().property(50);
console.log('Should be true', myViewModel2.isValid());
$('#messages').append('Should be true: ' + myViewModel2.isValid() + '\n\n');

ko.applyBindings(myViewModel2, vm2);

body, * {
    font-family: 'Segoe UI', Verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<h1>View Model 1</h1>
<div id="vm1" name="vm1">
    Property 1: <input type="text" data-bind="value: property1"/>
    <br/>
    Property 2: <input type="text" data-bind="value: property2"/>
    <br/>
</div>
<hr>
<div id="vm2" name="vm2">
  Property: <input type="text" data-bind="value: property"/>
</div>
<pre id="messages"></pre>

The validition option 'messagesOnModified: false' specified in the init means that the rules will be validated when the model is bound, not when the observable is modified for the first time. If the option was true, and the original value of a required field was empty, the error messages wouldn't be shown.

If you didn't specify a value for the property on myViewModel2, the isValid would be true, but specifying a value for it with myViewModel2().property(5) makes it false. An empty field is not validate for a minimum value.

Knockout.js and knockout-validations not working together

2 Answers