Form Validation using Decorator design pattern

Javascript Form Validation using the Decorator design pattern. Check the console for output. Reference: https://github.com/robdodson/JavaScript-Design-Patterns/tree/master/decorator/validator

by Richard Lovell

HTML

<h3>Form Validation using Decorator design pattern</h3>
<p>Check the console for output</p>
<!--form attributes and values are just tailored for jsfiddle-->
<form method="get" action="http://www.google.com" target="_blank" onsubmit="return validate(this);">
    <input type="text" name="name" placeholder="Enter your name...">
    <input type="number" name="age" placeholder="Enter your age...">
    <input type="text" name="post_code" placeholder="Enter your post code...">
    <button type="submit">Submit</button>
</form>

JavaScript

"use strict";

//Validator constructor class
function Validator() {
    //list for storing errors
    this.errors = [];
    //list for storing decorators
    this.decoratorsList = [];
    //util method
}

//methods on Validator's prototype

//add object containg function name and args to decorators list 
Validator.prototype.decorate = function(name, args) {
    this.decoratorsList.push({name: name, args: args});
};

//call the validate method of the decorators
Validator.prototype.validate = function(form) {
    var i, max, temp, name, args;
    this.form = form;
    max = this.decoratorsList.length;
    for (i = 0; i < max; i++) {
        temp = this.decoratorsList[i];
        name = temp.name;
        args = temp.args;
        Validator.decorators[name].validate.call(this, form, args);
    }
};

//util method
Validator.prototype.isEmpty = function(input) {
    return input.value === "";
};

//add a decorators object to Validator
Validator.decorators = {};

//add decorators which all have the same interface (validate method)

Validator.decorators.validateName = {
    validate: function(form, args) {
        if (this.isEmpty(form.name)) {
            this.errors.push('no name!');
        }
    }
};

Validator.decorators.validateAge = {
    validate: function(form, args) {
       if (this.isEmpty(form.age)) {
            this.errors.push('no age!');
        }else if (form.age.value < args.minimum) {
            this.errors.push('too young!');
        }
    }
};

Validator.decorators.validatePostCode = {
    validate: function(form, args) {
        if (this.isEmpty(form.post_code)) {
            this.errors.push('no post code!');
        }
    }
};

//controller function
function validate(form) {
    //create Valid
    var validator = new Validator();
    validator.decorate('validateName');
    validator.decorate('validateAge', {minimum: 21});
    validator.decorate('validatePostCode');
    validator.validate(form);
    console.log(validator.errors);
    return...