Tony Ho

A Simple Validation Framework with KnockoutJS

In my current side project, I am using KnockoutJS as the “backbone” of the site. I really like how I am able to very easily data-bind certain elements to their equivalent javascript variables without needing to give these elements some reference-able distinction such as an Id. Unfortunately, out of the box KnockoutJS does not offer some sort of validation framework to validate observables. In this post, I hope to show you a simple little framework that I’ve built to help me validate form elements.

Why not just use JQuery Validate?

• I’d have to wrap all my input elements within a form tag, even if it’s just an AJAX call.
• Each input element would need a “name” attribute
• KnockoutJS offers a ViewModel approach, I just want to build a model, and simply check if that model is correct. No $(‘#myForm’).valid() but along the lines of myModel.isValid(). This way I don’t mix in too much HTML-dependent code into my javascript code file. The separation of concerns is beautiful.

The Solution

The validation framework consists of two parts:

• The validation extensions (using KnockoutJS extenders)
• A base view model

Validation Extensions

To set up my validation rules, I use KnockoutJS’s extenders to augment our observables with validation properties.

Validation Rules Container
The first extender we’re writing will hold all the validation rules for our given observable.

ko.extenders.validation = function (target, modelValidationContainer) {
    // array of all rules for the given observable
    target.rules = [];

    // check the observable against all attached validators
    target.isValid = function () {
        var validSoFar = true;
        var i = 0;
        while (i < target.rules.length) {
            if (!target.rules[i]()) {
                validSoFar = false;
            }
            i += 1;
        }
        return validSoFar;
    };

    // push valid checking function to the model
    modelValidationContainer.push(target.isValid);

    return target;
}

Important parts of the code include

1. target.rules = [];

   This will hold all the rules associated with the observable

2. modelValidationContainer.push(target.isValid);

   This exposes our function that checks if the observable is valid for all rules to the model.

A Validation Rule
Here is a simple (required field) validation rule that can be attached to our container above.

ko.extenders.requiredValidation = function (target, validationMessage) {

    // subobservables that can be bound to HTML elements
    target.displayRequiredError = ko.observable(false);
    target.requiredValidationMessage = ko.observable();

    // The actual validation logic
    var validate = function () {
        if (target() == null || target() == '') {
            target.displayRequiredError(true);
            target.requiredValidationMessage(validationMessage ? validationMessage : "This field is required.");
            return false;
        }
        else {
            target.displayRequiredError(false);
            return true;
        }
    };

    // Add it to our validation rules container
    target.rules.push(validate);

    // Everytime the observable change, validate it
    target.subscribe(validate);

    return target;
}

Important parts:

1. Subobservables - This is where we can bind HTML elements to various validation intricacies. For example, the

   displayRequiredError

   can be bounded to an html element that is visible dependent on whether or not the observable is valid according to that rule.

2. Subscription -

   target.subscribe(validate)

   . It's critical that we subscribe our validate method to changes to the observable, so that it may revalidate on the fly.

3. Rules Container -

   target.rules.push(validate);

   Adding it to our rules container so that the rule's validation logic will be executed when isValid() is called.

The Base Model
One of the primary goals of this solution is to be able to just do

myModel.isValid()

To enable us to do this, we will need some predefined validation rules checking mechanism that validates all observables with their sets of rules. This is something that will be reused over and over again in multiple models, so it is best to create a "base model" from which all viewmodels may "inherit" from.

var BaseModel = function () {
    var self = this;

    this.validationContainers = [];

    // Iterate through the validationContainers of all
    // the observables with validation rules and check
    // validity
    this.isValid = function () {
        var validSoFar = true;
        var i = 0;
        while (i < self.validationContainers.length) {
            if (!self.validationContainers[i]()) {
                validSoFar = false;
            }
            i += 1;
        }
        return validSoFar;
    };
};

And here's a sample ViewModel that inherits from this basemodel

var login = function (baseModel) {
    if (baseModel == null) {
        baseModel = this;
    }

    var self = baseModel;

    self.userName = ko.observable('').extend({ validation: self.validationContainers, requiredValidation: "Username is required." });
    self.password = ko.observable('').extend({ validation: self.validationContainers, requiredValidation: "Password is required." });

    self.login = function () {
        // calling the basemodel's isValid() method
        if (!self.isValid()) {
            console.log('not valid');
        }
        else {
            console.log('valid');
        }
    }

    return baseModel;
};

ko.applyBindings(login(new BaseModel));

* Note that the validation extension has to be first before any rules

And here's a sample binding on the HTML side:

<label>
    Username<br />
    <input type="text" class="full-width" data-bind="value: userName" />
    <span class="error" data-bind="visible: userName.displayRequiredError, text: userName.requiredValidationMessage"></span>
</label>
<label>
    Password<br />
    <input type="password" class="full-width" data-bind="value: password"/>
    <span class="error" data-bind="visible: password.displayRequiredError, text: password.requiredValidationMessage"></span>
</label>

Demo

Here's a working demo!

Tags: knockoutJS, validation, web development 1 comment