Skip to content

Instantly share code, notes, and snippets.

@Jaybuz
Created February 16, 2012 17:19
Show Gist options
  • Save Jaybuz/1846555 to your computer and use it in GitHub Desktop.
Save Jaybuz/1846555 to your computer and use it in GitHub Desktop.
JS Validation function
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment