playing around with some field validation ideas.

field.js

(function (window, document, undefined) {
    'use strict';
    var Field = (function () {
        var el, errorEl, validators, lastValue, errors=[];
        var init = function (_el, _validators, _errorEl) {
            el = _el;
            errorEl = _errorEl;
            validators = _validators;
            _setHandlers();
            _clearErrors();
        };
        var validate = function () {
            _clearErrors();
            errors = [];
            for (var len = validators.length, i=0; i<len; ++i) {
                var error = validators[i](el.value);
                if (error) {
                    errors.push(error);
                };
            };
            if (errors.length > 0) {
                _setErrors();
            } else {
                _clearErrors();
            };
        };
        var _setErrors = function () {
            errorEl.style.display = 'inline';
            for (var len = errors.length, i=0; i<len; ++i) {
                 errorEl.innerHTML += errors[i] + '<br/>';
            };
        };
        var _clearErrors = function () {
            errorEl.innerHTML = '';
            errorEl.style.display = "none";
        };
        var _setHandlers = function () {
            el.addEventListener(
                'focus',
                function () {console.log('focusin');},
                false);
            el.addEventListener(
                'focus',
                function () {lastValue = el.value;},
                false);
            el.addEventListener('keyup', validate, false);
            el.addEventListener('change', validate, false);
            el.addEventListener(
                'blur',
                function () {
                    if (errors.length > 0) {
                        el.value = lastValue;
                        _clearErrors();
                    };
                },
                false);
        };
        return {
            init: init
        }
    });

    var validateGreaterZero = function(value) {
        var number = Number(value);
        if (isNaN(value) || value <= 0) {
            return 'Value must be a positive number';
        };
    };
    var validateLessThanTwenty = function (value) {
        var number = Number(value);
        if (isNaN(value) || value > 20) {
            return 'Value must be less than 20';
        };
    };
    var el = document.getElementById('form_input');
    var error1 = document.getElementById('input1_error');
    var el2 = document.getElementById('form_input2');
    var error2 = document.getElementById('input2_error');
    var button = document.getElementById('button');
    button.addEventListener(
        'click',
        function() {el.value ='aaa'; el.dispatchEvent(new Event('change'));},
        true);
    console.log(Field);
    var field1 = Field()
    field1.init(
        el,
        [validateGreaterZero, validateLessThanTwenty],
        error1);
    var field2 = Field()
    field2.init(
        el2,
        [validateGreaterZero],
        error2);
})(window, document);