Question

I have the following code:

function JobTask() {
    var self = this;

    self.description = ko.observable('').extend({
        required: true
    });
    self.priority = ko.observable('').extend({
        number: true,
        required: true
    });
    self.complete = ko.observable(false);
}

function CreateJobViewModel() {
    var self = this;

    self.task = ko.observable(new JobTask());

    self.taskErrors = ko.validation.group(self.task);
    self.addTask = function () {

        if (self.taskErrors().length) {
            console.log(self.taskErrors());
            self.taskErrors.showAllMessages();
        }
        else {
            ...
        }
    };
}

The problem is, when I add a task, it is invalid for some reason even when I have entered in the fields correctly. The console outputs [null]. Upon further investigation, it seems that even when I don’t enter my fields correctly, the first item in my taskErrors array is always [null]. So it may looks like: [null], "This field is required.". Not sure what I’ve done wrong?

Edit

Here is a fiddle I created of the problem: http://jsfiddle.net/5kh6h/1/

Answer 1

Move the errors into the JobTask and the issue goes away.

http://jsfiddle.net/jearles/5kh6h/4/

—

function JobTask() {
    var self = this;

    self.description = ko.observable('').extend({
        required: true
    });
    self.priority = ko.observable('').extend({
        number: true,
        required: true
    });
    self.complete = ko.observable(false);
    self.errors = ko.validation.group(self);    
}

function CreateJobViewModel() {
    var self = this;

    self.task = ko.observable(new JobTask());

    self.addTask = function() {

        if (self.task().errors().length) {
            console.log(self.task().errors());
            self.task().errors.showAllMessages();
        }
        else {
            alert('Success!');
        }
    };

}