CODEWITHSUNDEEP
javascriptjqueryknockout.jsknockout-validation
Lynob
Lynob

Reputation: 5337

viewModel.errors is not a function, knockout validation

I'm trying to replicate this code

http://jsfiddle.net/KHFn8/5424/

My code

<script type="text/javascript">
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
}, true);

  function person(mname, role, memail, mphone) {
  var self = this;

  self.validateNow = ko.observable(false);
  this.mname = ko.observable(mname);
  this.role = ko.observable(role);
  this.memail = ko.observable(memail);
  this.mphone = ko.observable(mphone);
  this.fullName = ko.pureComputed(function() {
    return  self.mname() + " " + "|" + " " + self.role() + " " + "|" + " " + self.memail() + " " + "|" + " " + self.mphone();}, this);
  this.click = function(){}
}

function viewModel() {
  this.mname = ko.observable('').extend({minLength: 2})
  this.role = ko.observable('');
  this.memail = ko.observable('');
  this.mphone = ko.observable('');
  this.people = ko.observableArray();
  this.add = function(){
        if (viewModel.errors().length === 0) {
    self.people.push(new person(self.mname(), self.role(), self.memail(), self.mphone()));
    self.mname(null);
    self.role(null);
    self.memail(null);
    self.mphone(null);
    } else {
      alert('Please check your submission.');
      viewModel.errors.showAllMessages();
    }

  }
  this.remove = function(row){
    self.people.remove(row);
  }
}

var myviewModel = new viewModel();

$(document).ready(function() {
  ko.applyBindings(myviewModel);
});

</script>

All I want to do is make the text input field mname required before adding it. That's all. but it keeps saying

add_club.php:354 Uncaught TypeError: viewModel.errors is not a function
    at viewModel.add (add_club.php:354)
    at HTMLButtonElement.<anonymous> (knockout-3.4.2.js:90)
    at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)
add @ add_club.php:354
(anonymous) @ knockout-3.4.2.js:90
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

basically this line is giving the error

 if (viewModel.errors().length === 0)

I'm using knockout version 3.4.2 and knockout validation version 2.0.3 and many jquery libraries and Jquery version 3.2.1. So I'm using the latest versions of each library.

The error is with knockout validation, the rest was working just fine before I tried to use it.

Upvotes: 0

Views: 1491

Answers (1)

Carlos Rodriguez
Carlos Rodriguez

Reputation: 2220

The error is telling you that viewModel.errors is not a function.

Without any knowledge of what that "errors" object is, it's hard to give an exact answer. All I know for sure is that it is not a function, so you can't call it (like viewModel.errors()). Inspect that object to decide what it actually is. If it's an array, then you could simply call access the "length" property

Update:

Looking at the JSFiddle, they are setting the errors object like this

viewModel.errors = ko.validation.group(viewModel);

at the bottom. I didn't see that in your code.

Upvotes: 2

Related Questions