trx
trx

Reputation: 2167

Required Field Validation error not displaying for fields added into Array

I am trying to add the fields in the form through Observable Array in the KnockoutJS to repeat the same section of fields. But the issue is the Required Field Validation errors are not displaying for the fields that are added through the Observable Array.

Below is what I am trying

 var orfViewModel = function () {
 var self = this;
 self.currentPage = ko.observable(1);
 self.referringPage = ko.observable();
 self.StrainDetails = ko.observableArray();

 self.koArrayErrors = ko.validation.group(self.StrainDetails(), {
    deep: true,
    live: true  });

 self.addStrain = function () {
    self.StrainDetails.push(new StrainVM());
 }

  self.remove = function (item) {
    self.StrainDetails.remove(item);
  };

I added the self.koArrayErrors validation errors within the array. So when a next button on page is clicked I am expecting to see the field required error message on the required fields. Below is the next button logic

  self.next = function () {
    self.errors = ko.validation.group(this);
    console.log(self.errors().length);
    if (self.errors().length != 0) {
        self.errors.showAllMessages();
        self.koArrayErrors.showAllMessages();
       
    }
    if (!formIsValid('Page_' + self.currentPage())) {
        $(window).scrollTop(0);
        return false;
    }

    if (self.referringPage() != null) {
        self.currentPage(self.referringPage());
        self.referringPage(null);
    } else {
        self.currentPage(self.currentPage() + 1);
    }
    self.gotoPage();
};

self.gotoPage = function () {
    $("div[id^='Page_']").hide();
    $("div[id^='Page_" + this.currentPage() + "']").show();
    $(window).scrollTop(0);
    self.errors.showAllMessages(false);
    self.koArrayErrors.showAllMessages(false);
};

Below is the StrainVM() which pushes the data in to the Observable array like

function StrainVM() { var self = this;

self.pdtNeeded = ko.observable().extend({ required: { params: true, message: "Required! Please sect Pdt Needed" } });
 
ko.validation.registerExtenders();

Even though I don't enter anything for pdtNeeded field, clicking on the Next button does not take me to next page and does not show the error Required! Please sect Pdt Needed next to field.

Users will not know what is not letting them to hit the next page.

How can I handle the validation here that is added to Observable array?

Upvotes: 2

Views: 348

Answers (0)

Related Questions