ando19721226/demo.html

## demo.html
<!DOCTYPE HTML>
<html lang="ja-JP">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="validate.js"></script>
        </head>
    <body>

    <div class="error_box"></div>

    <form name="example_form" action="#" method="POST">
        <label>氏名 : <input name="name" id="name" /></label>
        <br/>
        <label>年齢 : <input name="age" id="age" /></label>
        <br/>
        <button type="submit">Submit</button>
    </form>


<script type="text/javascript">

(function () {

    function DispErrors(errors) {
        var $errBox = $('.error_box'),
            i,
            len = errors.length;

        $errBox.empty();

        for (i = 0; i < len; i += 1) {
            $errBox.append(errors[i].message + '<br />');
        }
    }

    new FormValidator('example_form', [{
        name: 'name',
        display: '名前',
        rules: 'required'
    }, {
        name: 'age',
        display: '年齢',
        rules: 'required|integer'
    }], DispErrors);

}());

</script>

    </body>
</html>

## validate.js
(function (window, document) {

    var messages = {
            required: '「%s」は省略できません。',
            integer: '「%s」は数値を入力してください。'
        },
        integerRegex = /^\-?[0-9]+$/;

    function FormValidator(formName, fields, callback) {

        var i,
            fieldLength,
            field;

        this.callback = callback;
        this.errors = [];
        this.fields = {};
        this.form = document.forms[formName];

        for (i = 0, fieldLength = fields.length; i < fieldLength; i += 1) {

            field = fields[i];

            this.fields[field.name] = {
                display     : field.display || field.name,
                rules       : field.rules,
                value       : null
            };

        }

        this.form.onsubmit = (function (self) {
            return function (event) {
                return self.validateForm(event);
            };
        }(this));
    }

    FormValidator.prototype.validateForm = function (event) {
        var field,
            element,
            name;

        this.errors = [];

        for (name in this.fields) {
            if (this.fields.hasOwnProperty(name)) {
                field = this.fields[name];
                element = this.form[name];

                if (element) {
                    field.value = element.value;
                }
                this.validateField(name, field);
            }
        }

        if (typeof this.callback === 'function') {
            this.callback(this.errors);
        }

        if (this.errors.length > 0) {
            if (event && event.preventDefault) {
                event.preventDefault();
            } else {
                return false;
            }
        }

        return true;
    };

    FormValidator.prototype.validateField = function (name, field) {
        var rules = field.rules.split('|'),
            i,
            ruleLength,
            rule;

        if (field.rules.indexOf('required') === -1 && (!field.value || field.value === '' || field.value === undefined)) {
            return;
        }

        for (i = 0, ruleLength = rules.length; i < ruleLength; i += 1) {
            rule = rules[i];
            if (!this.hooks[rule].call(this, field)) {
                this.errors.push({
                    name    : name,
                    message : messages[rule].replace('%s', field.display)
                });
                break;
            }
        }
    };

    FormValidator.prototype.hooks = {
        required : function (field) {
            var value = field.value;
            return (value !== null && value !== '');
        },
        integer : function (field) {
            return (integerRegex.test(field.value));
        }
    };

    window.FormValidator = FormValidator;

}(window, document));
	<!DOCTYPE HTML>
	<html lang="ja-JP">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="validate.js"></script>
	</head>
	<body>

	<div class="error_box"></div>

	<form name="example_form" action="#" method="POST">
	<label>氏名 : <input name="name" id="name" /></label>
	<br/>
	<label>年齢 : <input name="age" id="age" /></label>
	<br/>
	<button type="submit">Submit</button>
	</form>


	<script type="text/javascript">

	(function () {

	function DispErrors(errors) {
	var $errBox = $('.error_box'),
	i,
	len = errors.length;

	$errBox.empty();

	for (i = 0; i < len; i += 1) {
	$errBox.append(errors[i].message + '<br />');
	}
	}

	new FormValidator('example_form', [{
	name: 'name',
	display: '名前',
	rules: 'required'
	}, {
	name: 'age',
	display: '年齢',
	rules: 'required\|integer'
	}], DispErrors);

	}());

	</script>

	</body>
	</html>
	(function (window, document) {

	var messages = {
	required: '「%s」は省略できません。',
	integer: '「%s」は数値を入力してください。'
	},
	integerRegex = /^\-?[0-9]+$/;

	function FormValidator(formName, fields, callback) {

	var i,
	fieldLength,
	field;

	this.callback = callback;
	this.errors = [];
	this.fields = {};
	this.form = document.forms[formName];

	for (i = 0, fieldLength = fields.length; i < fieldLength; i += 1) {

	field = fields[i];

	this.fields[field.name] = {
	display : field.display \|\| field.name,
	rules : field.rules,
	value : null
	};

	}

	this.form.onsubmit = (function (self) {
	return function (event) {
	return self.validateForm(event);
	};
	}(this));
	}

	FormValidator.prototype.validateForm = function (event) {
	var field,
	element,
	name;

	this.errors = [];

	for (name in this.fields) {
	if (this.fields.hasOwnProperty(name)) {
	field = this.fields[name];
	element = this.form[name];

	if (element) {
	field.value = element.value;
	}
	this.validateField(name, field);
	}
	}

	if (typeof this.callback === 'function') {
	this.callback(this.errors);
	}

	if (this.errors.length > 0) {
	if (event && event.preventDefault) {
	event.preventDefault();
	} else {
	return false;
	}
	}

	return true;
	};

	FormValidator.prototype.validateField = function (name, field) {
	var rules = field.rules.split('\|'),
	i,
	ruleLength,
	rule;

	if (field.rules.indexOf('required') === -1 && (!field.value \|\| field.value === '' \|\| field.value === undefined)) {
	return;
	}

	for (i = 0, ruleLength = rules.length; i < ruleLength; i += 1) {
	rule = rules[i];
	if (!this.hooks[rule].call(this, field)) {
	this.errors.push({
	name : name,
	message : messages[rule].replace('%s', field.display)
	});
	break;
	}
	}
	};

	FormValidator.prototype.hooks = {
	required : function (field) {
	var value = field.value;
	return (value !== null && value !== '');
	},
	integer : function (field) {
	return (integerRegex.test(field.value));
	}
	};

	window.FormValidator = FormValidator;

	}(window, document));