CODEWITHSUNDEEP
validationknockout.js
user4149157
user4149157

Reputation:

Knockout validation isValid() is not working

I have a viewmodel and there I have properties which are extended to use validation. I call ko.validation.group(self) but this doesn't add the isValid() method to the viewmodel.

So I get an error that isValid() is undefined.

Here is my code:

var brechtbaekelandt = brechtbaekelandt || {};

brechtbaekelandt.login = (function ($, jQuery, ko, undefined) {
"use strict";

function LoginViewModel() {

    var self = this;

    self.userName = ko.observable();
    self.password = ko.observable();
    self.rememberMe = ko.observable();

    self.errorMessage = ko.observable();

    self.userName.extend({ required: { message: 'Please enter your username' } });
    self.password.extend({ required: { message: 'Please enter your password' } });

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

LoginViewModel.prototype.login = function () {

    var self = this;      

    self.errorMessage(null);

    alert('entering login');

    // self.isValid() is not a function
    if (!self.isValid()) {

        alert('login invalid');

        self.errors.showAllMessages();
        return;
    }
    else
    {
        alert('login valid');
        // do login
    }       
};

function init() {

    alert('entering init');

    var knockoutValidationSettings = {
        insertMessages: false,
        decorateElement: true,
        decorateElementOnModified: true,
        decorateInputElement: true,
        //errorMessageClass: 'error',
        //errorElementClass: 'error',
        //errorClass: 'error',
        errorsAsTitle: false,
        parseInputAttributes: false,
        messagesOnModified: true,
        messageTemplate: null,
        grouping: { deep: true, observable: true }
    };

    ko.validation.init(knockoutValidationSettings, true);

    var viewModel = new LoginViewModel();

    ko.applyBindingsWithValidation(viewModel);
}

return {
    LoginViewModel: LoginViewModel,
    init: init
};

})($, jQuery, ko);

I have created a js fiddle: click here

I've read somewhere that you need to call registerExtenders() but I tried it and it doesn't work either.

Can someone help me in the right direction? Thx!

Upvotes: 2

Views: 8684

Answers (1)

super cool
super cool

Reputation: 6045

well you seem to be looking for isValid when using group tough there is a way (alternate way) using length property to achieve it . As isValid doesn't seem to be available when using group (it exists with validatedObservable) .

As @jeff mentioned in one of this answers on this topic

The ko.validation.group just gives you an (computed) observable of all the error messages in a model. It only collects error messages of direct properties of the model.

The ko.validatedObservable on the other hand not only collects the error messages, but also wraps the model in an observable and adds an isValid property which indicates whether or not there are any error messages (i.e., the model was completely valid). Otherwise, they're essentially the same.

I modified your code accordingly like below 

    self.errors = ko.validation.group(self); //It will group error messages in array i.e based on count you must validate 
    LoginViewModel.prototype.login = function () {
            var self = this;      
            self.errorMessage(null);
            //self.isValid() doesn't exist here . so you should base length 
            if (self.errors().length>0) {
                alert('login invalid');         
                self.errors.showAllMessages();
                return;
            }     
        };

working sample with group

working sample with ValidatedObservable Preferable way Imho

Upvotes: 5

Related Questions