Reputation: 2167
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