csain/form-validator.js

## form-validator.js
function validateEmail(email) {
   var email_regex = /\w+[\w\.]*@\w+.\w{2,4}/i;
   return email_regex.test(email);
};

function validatePasswordLength(password) {
   return password.length >= 8;
};

function validatePasswordCapital(password) {
   return password.toLowerCase() != password;
};

function validatePasswordNumber(password) {
  return /\d/.test(password);
};

$(function(){

  $("button").on("click", function(event){
    event.preventDefault();
    var email = document.forms["sign_up"]["email"].value;
    var password = document.forms["sign_up"]["password"].value

    if (!validateEmail(email))
    {  $("ul").append("<li>Must be a valid email address</li>");
    }
    if (!validatePasswordLength(password))
    {   $("ul").append("<li>Password must be at least 8 characters long</li>");
    }
    if (!validatePasswordCapital(password))
    {  $("ul").append("<li>Password must have at least one capital letter</li>");
    }
    if (!validatePasswordNumber(password))
    {  $("ul").append("<li>Password must have at least one numeric character(0-9)</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 validateEmail(email) {
	var email_regex = /\w+[\w\.]*@\w+.\w{2,4}/i;
	return email_regex.test(email);
	};

	function validatePasswordLength(password) {
	return password.length >= 8;
	};

	function validatePasswordCapital(password) {
	return password.toLowerCase() != password;
	};

	function validatePasswordNumber(password) {
	return /\d/.test(password);
	};

	$(function(){

	$("button").on("click", function(event){
	event.preventDefault();
	var email = document.forms["sign_up"]["email"].value;
	var password = document.forms["sign_up"]["password"].value

	if (!validateEmail(email))
	{ $("ul").append("<li>Must be a valid email address</li>");
	}
	if (!validatePasswordLength(password))
	{ $("ul").append("<li>Password must be at least 8 characters long</li>");
	}
	if (!validatePasswordCapital(password))
	{ $("ul").append("<li>Password must have at least one capital letter</li>");
	}
	if (!validatePasswordNumber(password))
	{ $("ul").append("<li>Password must have at least one numeric character(0-9)</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>