Skip to content

Instantly share code, notes, and snippets.

@siciliana

siciliana/form-validator.js

Forked from ksolo/form-validator.js
Last active December 24, 2015 00:59
Show Gist options
  • Save siciliana/6720561 to your computer and use it in GitHub Desktop.
Save siciliana/6720561 to your computer and use it in GitHub Desktop.
Download ZIP
Form Validation
Raw
form-validator.js
$(document).ready(function(){
$('form').on('submit', function(event){
event.preventDefault()
$('#errors').html('')
var email_address = $(this).find("input[name='email']").val()
var password = $(this).find ("input[name='password']").val()
var email_regex = /^((([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])))\.?$/;
var passwordNumber = /\d/;
var passwordCapital = /[A-Z]/;
var passwordLength = /.{8}/
if (!email_regex.test(email_address)) {
$('#errors').append('<li>Must be a valid email address</li>')
}
if (!passwordNumber.test(password)) {
$('#errors').append('<li>Password must have at least one valid number')
}
if (!passwordCapital.test(password)) {
$('#errors').append('<li>Password must have at least one capital letter</li>')
}
if (!passwordLength.test(password)) {
$('#errors').append('<li>Password must be at least 8 characters</li>')
}
})
});
// When the user clicks the "Sign Up" button
// They should be notified if any of the following conditions are NOT true
// - The email conforms to the standard pattern
// - The password has at least 8 characters
// - The password has at least one capital letter
// - The password has at least one numeric character
// If any of the above conditions are false
// - The form is not allowed to be submitted
// - Error messages are dislpayed
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" name="email" />
<label for="password">Password</label>
<input type="password" name="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