Jaybuz/index.html

## index.html
<html>
<head>
	<title>js validate</title>
</head>
<body>
	<form id="loginform" method="post" action="#" onsubmit="return validateFields(this)">
		<div>
			<label class="labelarea">Customer Num:</label>
			<input id="custninputID" type="text" name="custninput" class="inputarea" onblur="validateFields(this)" data-validate='{"pattern":"/^\\d{4}$/"}' data-error='{"empty":"Please enter something in the customer number input.", "pattern":"Customer number must be 4 digits!"}' /><br />
			<span id="custninputID-info"></span><br />
			<label class="labelarea">Password:</label>
			<input name="passwordinput" id="passwordinputID" type="password" class="inputarea" onblur="validateFields(this)" data-validate data-error='{"empty":"Please enter something in the password input."}' /><br />
			<span id="passwordinputID-info"></span><br />
			<input type="submit" name="submitted" value="Log In" id="submit" />
		</div>
	</form>
<script src="validate.js" type="text/javascript"></script>
</body>
</html>

## validate.js
function validateFields(el)
{
	var valid = true,
		validField = true,
		fields = (el.nodeName === 'FORM') ? el.getElementsByTagName('input') : [el],
		i = fields.length;

	while( --i + 1 )
	{
		var field = fields[i],
			type = field.getAttribute('type');

		if( type !== 'text' && type !== 'password' )
			continue;

		var validate = field.getAttribute('data-validate');

		if( validate === null )
			continue;

		var error = field.getAttribute('data-error'),
			id = field.getAttribute('id'),
			info = document.getElementById(id + '-info'),
			value = field.value,
			regex;

		/* JSON support: Internet Explorer 8+, Firefox 3.1+, Safari 4+, Chrome 3+, and Opera 10.5+ */
		validate = (validate) ? JSON.parse(field.getAttribute('data-validate')) : {};
		validate.req = (validate.req === 'false') ? false : true;
		error = (error) ? JSON.parse(error) : {};

		if( !value )
		{
			if( validate.req == true )
			{
				validField = false;

				if( error.empty )
				{
					info.innerHTML = error.empty;
				}
			}
		}
		else
		{
			if( validate.pattern )
			{
				regex = validate.pattern.split('/', 3);

				if( !RegExp(regex[1], regex[2]).test(value) )
				{
					validField = false;

					if( error.pattern )
					{
						info.innerHTML = error.pattern;
					}
				}
			}
		}

		if( !validField )
		{
			if( field.className.search('error') === -1 )
			{
				field.className += ' error' ;
			}

			valid = false;
		}
		else
		{
			field.className = field.className.replace(' error', '');

			info.innerHTML = '';
		}
	}

	return valid;
}
	<html>
	<head>
	<title>js validate</title>
	</head>
	<body>
	<form id="loginform" method="post" action="#" onsubmit="return validateFields(this)">
	<div>
	<label class="labelarea">Customer Num:</label>
	<input id="custninputID" type="text" name="custninput" class="inputarea" onblur="validateFields(this)" data-validate='{"pattern":"/^\\d{4}$/"}' data-error='{"empty":"Please enter something in the customer number input.", "pattern":"Customer number must be 4 digits!"}' /><br />
	<span id="custninputID-info"></span><br />
	<label class="labelarea">Password:</label>
	<input name="passwordinput" id="passwordinputID" type="password" class="inputarea" onblur="validateFields(this)" data-validate data-error='{"empty":"Please enter something in the password input."}' /><br />
	<span id="passwordinputID-info"></span><br />
	<input type="submit" name="submitted" value="Log In" id="submit" />
	</div>
	</form>
	<script src="validate.js" type="text/javascript"></script>
	</body>
	</html>
	function validateFields(el)
	{
	var valid = true,
	validField = true,
	fields = (el.nodeName === 'FORM') ? el.getElementsByTagName('input') : [el],
	i = fields.length;

	while( --i + 1 )
	{
	var field = fields[i],
	type = field.getAttribute('type');

	if( type !== 'text' && type !== 'password' )
	continue;

	var validate = field.getAttribute('data-validate');

	if( validate === null )
	continue;

	var error = field.getAttribute('data-error'),
	id = field.getAttribute('id'),
	info = document.getElementById(id + '-info'),
	value = field.value,
	regex;

	/* JSON support: Internet Explorer 8+, Firefox 3.1+, Safari 4+, Chrome 3+, and Opera 10.5+ */
	validate = (validate) ? JSON.parse(field.getAttribute('data-validate')) : {};
	validate.req = (validate.req === 'false') ? false : true;
	error = (error) ? JSON.parse(error) : {};

	if( !value )
	{
	if( validate.req == true )
	{
	validField = false;

	if( error.empty )
	{
	info.innerHTML = error.empty;
	}
	}
	}
	else
	{
	if( validate.pattern )
	{
	regex = validate.pattern.split('/', 3);

	if( !RegExp(regex[1], regex[2]).test(value) )
	{
	validField = false;

	if( error.pattern )
	{
	info.innerHTML = error.pattern;
	}
	}
	}
	}

	if( !validField )
	{
	if( field.className.search('error') === -1 )
	{
	field.className += ' error' ;
	}

	valid = false;
	}
	else
	{
	field.className = field.className.replace(' error', '');

	info.innerHTML = '';
	}
	}

	return valid;
	}