CODEWITHSUNDEEP
validationknockout.js
renathy
renathy

Reputation: 5355

Knockout validation doesn't show errors for ko.validatedObservable

I have a list of validatedObservables defined. For instance one of them:

self.CompanyName = ko.observable().extend({ required: true });
self.ContactPerson = ko.observable().extend({ required: true });
self.step1Validation = ko.validatedObservable([
        self.CompanyName,
        self.ContactPerson
    ]);

I have also other validators except "required" one. For instance, email validator. When user enters incorrect email and moves to another field, then red error message appears. This means that error message are generated and appear nearby controls.

However, when I try to validate all validatedObservable at once, then error message doesn't appear nearby controls. How to fix this?

The validation looks like this (this is self function):

  if (self.step1Validation.isValid()) {
      return true;
  } else {
      // SHOULD SOMEHOW SHOW ALL ERROR MESSAGE FOR THIS STEP (step1Validation)
      return false; // this doens't allow user to move to next step in wizard
  }

EDIT Here is some simplified jsfiddler example: http://jsfiddle.net/ng73s0hq/1/

In this example, if you add incorrect email and move to another field, then you can see "red error message". But if you press "submit" then validation fails, but there is no error messages (should be required failure + email validation failure).

Upvotes: 2

Views: 7051

Answers (2)

Dandy
Dandy

Reputation: 2177

You need to first validate your ko.validatedObservable object, and if invalid then use the showAllMessages(true) method to display validation errors.

var result = ko.validation.group(self.step1Validation, {deep: true});  
if (self.step1Validation.isValid()) {
      return true;
  } else {
        result.showAllMessages(true);
      // SHOULD SOMEHOW SHOW ALL ERROR MESSAGE FOR THIS STEP (step1Validation)
      return false; // this doens't allow user to move to next step in wizard
  }

Upvotes: 0

super cool
super cool

Reputation: 6045

All you need to do is on click you should call this self.step1Validation.errors.showAllMessages() to show error messages .

Simplified version viewModel:

ko.validation.init({
    insertMessages: false
});

var patterns = {
    email: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/
};

var ViewModel = function () {
    var self = this;
    self.CompanyName = ko.observable();
    self.ContactPerson = ko.observable();
    self.Email = ko.observable();

    self.test = ko.observable();

    self.step1Validation = ko.validatedObservable([
    self.CompanyName.extend({
        required: true
    }),
    self.ContactPerson.extend({
        required: true
    }),
    self.Email.extend({
        required: true,
        pattern: {
            message: 'Must be a valid email',
            params: patterns.email
        }
    })]);

    self.clickDone = function () {
        if (self.step1Validation.isValid()) {
            self.test('valid');
            return true;
        } else {
            self.test('invalid');
            self.step1Validation.errors.showAllMessages()
            return false;
        };
    };
};

var model = new ViewModel();
ko.applyBindings(model);

working sample here

Upvotes: 4

Related Questions