stevenspiel/form-validator.js

## form-validator.js
$(function(){
  $('#submit').click(function(e){
    e.preventDefault();
    var errors = [];
    if(!$('#email').val().match(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i) ){
      errors.push("<li>Must be a valid email address </li>");
    }
    if(!$('#password').val().match(/[0-9]+?/)){
      errors.push("<li>Password must have at least one numeric character (0-9)</li>");
    }
    if(!$('#password').val().match(/[A-Z]+?/)){
      errors.push("<li>Password must have at least one capital letter</li>");
    }
    if(!$('#password').val().match(/.{8}/)){
      errors.push("<li>Password must be at least 8 characters long</li>");
    }
    $('#errors').html(errors);
  })
});

## 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" id="sign-up" action="#" method="post">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
      <label for="password">Password</label>
      <input type="password" name="password" id="password" />

      <button type="submit" id="submit">Sign Up</button>
    </form>
      <ul id="errors"></ul>
    <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>

## main.css
ul#errors {
  color: red;
}
	$(function(){
	$('#submit').click(function(e){
	e.preventDefault();
	var errors = [];
	if(!$('#email').val().match(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i) ){
	errors.push("<li>Must be a valid email address </li>");
	}
	if(!$('#password').val().match(/[0-9]+?/)){
	errors.push("<li>Password must have at least one numeric character (0-9)</li>");
	}
	if(!$('#password').val().match(/[A-Z]+?/)){
	errors.push("<li>Password must have at least one capital letter</li>");
	}
	if(!$('#password').val().match(/.{8}/)){
	errors.push("<li>Password must be at least 8 characters long</li>");
	}
	$('#errors').html(errors);
	})
	});
	<!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" id="sign-up" action="#" method="post">
	<label for="email">Email</label>
	<input type="text" name="email" id="email" />
	<label for="password">Password</label>
	<input type="password" name="password" id="password" />

	<button type="submit" id="submit">Sign Up</button>
	</form>
	<ul id="errors"></ul>
	<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>