Skip to content

Instantly share code, notes, and snippets.

@tarynsauer

tarynsauer/form-validator.js

Forked from ksolo/form-validator.js
Last active December 22, 2015 09:49
Show Gist options
  • Save tarynsauer/6454227 to your computer and use it in GitHub Desktop.
Save tarynsauer/6454227 to your computer and use it in GitHub Desktop.
Download ZIP
Form Validation
Raw
form-validator.js
$(function(){
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
function hasNumericCharacter(password) {
var pattern = new RegExp(/^(?=.*[0-9])/);
return pattern.test(password);
};
function hasCapitalLetter(password) {
var pattern = new RegExp(/^(?=.*[A-Z])/);
return pattern.test(password);
};
function hasEightCharacters(password) {
var pattern = new RegExp(/^[0-9a-zA-Z]{8,}$/);
return pattern.test(password);
};
$("#email").change(function() {
var emailInput = $( "#email" ).val();
if (!isValidEmailAddress(emailInput)) {
$("#errors").append( "<li id='emailerror'>Your email is not valid.</li>" );
} else {
$("#emailerror").remove();
}
});
$("#password").change(function() {
var passwordInput = $( "#password" ).val();
if (!hasNumericCharacter(passwordInput)) {
$("#errors").append( "<li id='passwordNumError'>Your password must have at least one numeric character.</li>" );
} else {
$("#passwordNumError").remove();
}
if (!hasCapitalLetter(passwordInput)) {
$("#errors").append( "<li id='passwordCapitalError'>Your password must have at least one capital letter.</li>" );
} else {
$("#passwordCapitalError").remove();
}
if (!hasEightCharacters(passwordInput)) {
$("#errors").append( "<li id='passwordEightCharacters'>Your password must have at least eight characters.</li>" );
} else {
$("#passwordCapitalError").remove();
}
});
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Form Validation</title>
</head>
<body>
<form name="sign_up" action="#" method="post">
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<button type="submit">Sign Up</button>
<ul id="errors"></ul>
</form><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="form-validator.js"></script>
</body>
</html>
Raw
main.css
ul#errors {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment