ElaineYu/form-validator.js

## form-validator.js
// shorthand for $(document).ready();
$(function(){
  //Your code...
  // see http://www.w3schools.com/js/js_form_validation.asp

  //event setup using the `.on()` method
  // http://learn.jquery.com/events/event-basics/
  $('form').on('submit', function(event){
    event.preventDefault();
  	validateForm();
  })

  // Define method validateForm
  validateForm = function() {
  	// added id= "password" in HTML
  	// create variable called password
  	//get .val() get variables
  	var password = $('#password').val();

  	// added id= "password" in HTML
  	var email	 = $('#email').val();

  	//REGEX
  	//Email confirmation
  	var emailConfirm = /^[^@ ]+@[^@ ]+\.[^@ ]+$/;
  	//Password confirmation
  	var containsDigits = /\d/; // can also do [0-9]
  	var containsCapitalLetter = /.*?[A-Z].*?/;
  	var atleastEightChar = /^.{8,}/;

  	// initiate empty array to contain error messages
  	var errorMessage = []

  	// Must be a valid email address
  	if (!emailConfirm.test(email)) {
  		errorMessage.push("Must be a valid email address");
    }

    // Password must have at least one numeric character (0-9)
    if (!containsDigits.test(password)) {
    	errorMessage.push("Password must have at least one numeric character (0-9)");
    }

    // Password must have at least one capital letter
    if (!containsCapitalLetter.test(password)) {
    	errorMessage.push("Password must have at least one capital letter")
    }

    // Password must be at least 8 characters long
    if (!atleastEightChar.test(password)) {
    	errorMessage.push("Password must be at least 8 characters long")
    }
    console.log(errorMessage)

    //for loop in javascript
    //http://www.w3schools.com/js/js_loop_for.asp
    for (var i=0;i<errorMessage.length;i++)
	{
		// append list items (li) into HTML
		$('#errors').append("<li>" + errorMessage[i] + "</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 id="email" type="text" name="email" />
      <label for="password">Password</label>
      <input id= "password" 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;
}
	// shorthand for $(document).ready();
	$(function(){
	//Your code...
	// see http://www.w3schools.com/js/js_form_validation.asp

	//event setup using the `.on()` method
	// http://learn.jquery.com/events/event-basics/
	$('form').on('submit', function(event){
	event.preventDefault();
	validateForm();
	})

	// Define method validateForm
	validateForm = function() {
	// added id= "password" in HTML
	// create variable called password
	//get .val() get variables
	var password = $('#password').val();

	// added id= "password" in HTML
	var email = $('#email').val();

	//REGEX
	//Email confirmation
	var emailConfirm = /^[^@ ]+@[^@ ]+\.[^@ ]+$/;
	//Password confirmation
	var containsDigits = /\d/; // can also do [0-9]
	var containsCapitalLetter = /.?[A-Z].?/;
	var atleastEightChar = /^.{8,}/;

	// initiate empty array to contain error messages
	var errorMessage = []

	// Must be a valid email address
	if (!emailConfirm.test(email)) {
	errorMessage.push("Must be a valid email address");
	}

	// Password must have at least one numeric character (0-9)
	if (!containsDigits.test(password)) {
	errorMessage.push("Password must have at least one numeric character (0-9)");
	}

	// Password must have at least one capital letter
	if (!containsCapitalLetter.test(password)) {
	errorMessage.push("Password must have at least one capital letter")
	}

	// Password must be at least 8 characters long
	if (!atleastEightChar.test(password)) {
	errorMessage.push("Password must be at least 8 characters long")
	}
	console.log(errorMessage)

	//for loop in javascript
	//http://www.w3schools.com/js/js_loop_for.asp
	for (var i=0;i<errorMessage.length;i++)
	{
	// append list items (li) into HTML
	$('#errors').append("<li>" + errorMessage[i] + "</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 id="email" type="text" name="email" />
	<label for="password">Password</label>
	<input id= "password" 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>