durandal with ko.validation.init

Question

So, here is the problem i have been facing for couple of days.

I have a durandal application and i want to apply ko validation on the controls. Now, the validation does get applied but the problem is that it does not take affect at the first load. For e.g. if i have a text box which has required set as true and at the load time, this text box is empty, KO does not show required message.

It only shows message if i type something in the text box, then move out of the text box, come again in text box, remove the data and then again move out of the text box.

I even tried adding ko.validation.init({messagesOnModified: false}), and validation option in HTML inside div tag.

But no affect.

Below is my code

define(function (require) {
 ko.validation.init({
    messagesOnModified: false        
});
var duration = ko.observable().extend({
    required: { message: 'Please enter valid number.' }, number: true
});
var email = ko.observable().extend({ email: true, required: true });

var vm = {
    duration: duration,
    email: email

};
vm["errors"] = ko.validation.group(vm);
return vm;
});

HTML Code

            <span data-bind="text: errors().length"></span> Errors

            <div>
                <label for="txtDuration">Duration</label>
                <input name="txtDuration" type="text" data-bind="value: duration" />
                <span>(Min)</span>
            </div>
            <div>
                <label for="txtEmail">Email</label>
                <input name="txtEmail" type="text" data-bind="value: email" />
            </div>
            <input type="submit" value="Submit" data-bind="enable: isValid()">

    </form>

Please help.

I also tried a knockout validation on Fiddle and it also has same issue. http://jsfiddle.net/sachinohri/U3QZU/ This also has same issue that in it does not show required message on intial load of text box (text box is empty by default) — user1662008, Jun 11 '13 at 04:58

score 4 · Accepted Answer · answered Jun 11 '13 at 09:12

4

This issue on the validation issue list describes the behavior: https://github.com/Knockout-Contrib/Knockout-Validation/issues/211.

Proposed workarounds:

Use vm.name.isModified(true) or vm.name.valueHasMutated() to trigger an update. http://jsfiddle.net/RainerAtSpirit/v6dek/6/

ko.validation.init({

    messagesOnModified: false
});

var vm = {
    name: ko.observable().extend({
        required: true
    })
};
vm.name.isModified(true) // or alternatively vm.name.valueHasMutated();
ko.applyBindings(vm);

answered Jun 11 '13 at 09:12

RainerAtSpirit

3,723
1
17
18

Thanks. This works very well. After testing this i had another question :) If i don't want to show the message at the load of the screen but, only when user navigates from the text box (text box lost focus) and there is no value change. I hope i am making some sense, let me give an example. I have a text box with required "true" but first time when it loads, text box is blank. Now if user navigates to that text box (focuses on the text box) and without doing anything(does not type but just tabs out of the text box) moves out of the text box then only i would want to show the message. – user1662008 Jun 11 '13 at 09:48
Don't hijack your own question ;-). Research the new question on stackoverlflow and the validation issue list and ask a new question if you can't find an answer. – RainerAtSpirit Jun 11 '13 at 10:04

score 2 · Answer 2 · answered Jun 11 '13 at 08:43

2

You have to use a validation group and showAllMessages

http://jsfiddle.net/U3QZU/1/

this.errors = ko.validation.group(this);
this.errors.showAllMessages();

answered Jun 11 '13 at 08:43

Anders

17,306
10
76
144

durandal with ko.validation.init

2 Answers2