RainMonster/form-validator.js

## form-validator.js
$(function(){

  $("form").submit(function(e){
    e.preventDefault();
    var formEmail = $(this).find("[name=email]").val();
    var formPassword = $(this).find("[name=password]").val();
    $("#errors").empty();

    validateEmail(formEmail);
    validatePasswordNum(formPassword);
    validatePasswordCap(formPassword);
    validatePasswordLen(formPassword);
  });

});

var validateEmail = function(email){
  var emailValid=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  if (emailValid.test(email) === false) {
    $("#errors").append("<li>Invalid email</li>");
  }
};

var validatePasswordNum = function(password){
  var passwordIncludeNumber=/[0-9]/;
  if (passwordIncludeNumber.test(password) === false) {
    $("#errors").append("<li>Password must include a number</li>");
  }
};

var validatePasswordCap = function(password){
  var passwordIncludeCapital=/[A-Z]/;
  if (passwordIncludeCapital.test(password) === false) {
    $("#errors").append("<li>Password must include a capital letter</li>");
  }
};

var validatePasswordLen = function(password){
  if (password.length < 8 ) {
    $("#errors").append("<li>Password must be at least 8 characters long.</li>");
  }
};

## 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>

## main.css
ul#errors {
  color: red;
}
	$(function(){

	$("form").submit(function(e){
	e.preventDefault();
	var formEmail = $(this).find("[name=email]").val();
	var formPassword = $(this).find("[name=password]").val();
	$("#errors").empty();

	validateEmail(formEmail);
	validatePasswordNum(formPassword);
	validatePasswordCap(formPassword);
	validatePasswordLen(formPassword);
	});

	});

	var validateEmail = function(email){
	var emailValid=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
	if (emailValid.test(email) === false) {
	$("#errors").append("<li>Invalid email</li>");
	}
	};

	var validatePasswordNum = function(password){
	var passwordIncludeNumber=/[0-9]/;
	if (passwordIncludeNumber.test(password) === false) {
	$("#errors").append("<li>Password must include a number</li>");
	}
	};

	var validatePasswordCap = function(password){
	var passwordIncludeCapital=/[A-Z]/;
	if (passwordIncludeCapital.test(password) === false) {
	$("#errors").append("<li>Password must include a capital letter</li>");
	}
	};

	var validatePasswordLen = function(password){
	if (password.length < 8 ) {
	$("#errors").append("<li>Password must be at least 8 characters long.</li>");
	}
	};
	<!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>