Issues with knockout observable array validation

Question

I have an issue with a validation rule that I put on observablearray elements. I'm using a custom message template to display the errors, the issue is that it doesn't get displayed on when the errors are there, however, I can see the '*' against the relevant field. Following is my model:

function ViewModel(item) {
var parse = JSON.parse(item.d);
var self = this;
this.ID = ko.observable(parse.ID).extend({ required: { params: true, message: "ID is required" }});
this.Name = ko.observable(parse.Name);
this.WeeklyData = ko.observableArray([]);
var records = $.map(parse.WeeklyData, function (data) { return new Data(data) });
this.WeeklyData(records);
}

var Data = function (data) {
this.Val = ko.observable(data).extend({
    min: { params: 0, message: "Invalid Minimum Value" },
    max: { params: 168, message: "Invalid Maximum Value" }   
});

Here is the validation configuration I'm using:

    // enable validation
    ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: false,
    insertMessages: true,
    parseInputAttributes: false,
    messageTemplate: "customMessageTemplate",
    grouping: { deep: true }
    });
    ko.validation.init();

Any my custom message template goes like this:

   <script id="customMessageTemplate" type="text/html">
      <em class="errorMsg" data-bind='visible: !field.isValid()'>*</em>
   </script>

   <ul data-bind="foreach: Errors">
     <li class="errorMsg" data-bind="text: $data"></li>
   </ul>

With this implementation, I don't see the validation messages in the custom template. But if I remove the configuration deep: true, it doesn't validate the observable array elements, but the other observable(ID) and then the message is displayed properly.

I'm very confused with this and a bit stuck, so appreciate if someone can help/

Thanks in advance.

Gaurav Gaurav · Accepted Answer · 2013-04-05T09:55:10

What i understand from your question is that you are trying to validate your observableArray entries, so that if any entry in your WeeklyData observableArray fails the following condition:

arrayEntry % 15 === 0

you want to show error message. If this is the case, than the following custom validator can do the job for you :

var fminIncrements = function (valueArray) {
  var check = true;    
  ko.utils.arrayFirst(valueArray, function(value){
        if(parseInt(value, 10) % 15 !== 0)
        {
          check = false;
          return true;
        }
     }); 
  return check;
};

And you have to apply this validator on the observableArray (no need to set validation on individual entries of the array). This validator takes array as input and validate its each entry, if any one entry fails the validation it will retrun false and than you will see the error message.

Your viewmodel looks like :

function viewModel() { 
    var self = this;

    self.WeeklyData = ko.observableArray([
      15, 
      40
    ]).extend({ 
        validation: {
          validator: fminIncrements,
          message: "use 15 min increments" 
        }
    });


    self.errors = ko.validation.group(self);
}

And here is the working fiddle.

Issues with knockout observable array validation

2 Answers