cprater · August 29, 2015 13:56
diff --git a/form-validator.js b/form-validator.js
 var validateEmail = function(email){
 	if (email.match(/\w+\.\w{3,6}/))
 		return true;
 	else
 		return false;
 };

 var validatePasswordLength = function(password){
 	if (password.length >= 8)
 		return true;
 	else
 		return false;
 };

 var validatePasswordCapital = function(password) {
 	if (password.match(/[A-Z]/))
 		return true;
 	else
 		return false;
 };

 var validatePasswordNumber = function(password) {
 	if (password.match(/[0-9]/))
 		return true;
 	else
 		return false;
 }


 // shorthand for $(document).ready();
 $(function(){
 	// $('#errors > li').hide();

  $(document).on('keyup', function(event){
 		event.preventDefault();


 		var email = $('#email').val();
 		var password = $('#password').val();


 		//Email
 		if (validateEmail(email))
 			$('#email-error').addClass('hide');			
 		else
 			$('#email-error').removeClass('hide');
 			

 		//Password Length
 		if (validatePasswordLength(password))
 			$('#length').addClass('hide');
 		else
 			$('#length').removeClass('hide');

 		//Password Capital
 		if (validatePasswordCapital(password))
 			$('#capital').addClass('hide');
 		else
 			$('#capital').removeClass('hide');

 		//Password Number
 		if (validatePasswordNumber(password))
 			$('#number').addClass('hide');
 		else
 			$('#number').removeClass('hide');

 		//Hide submit until all fields are correct
 		if ($('#errors li').length === $('#errors li.hide').length)
 			$('#submit').removeClass('hide');
 		else
 			$('#submit').addClass('hide');
 	})

 });

 // 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
diff --git a/index.html b/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 type="password" id="password" name="password" />

      <button id="submit" class="hide" type="submit">Sign Up</button>

      <ul id="errors">
        <li id="email-error" class="hide">Invalid email</li>
        <li id="length" class="hide">Password must be at least 8 characters long</li>
        <li id="capital" class="hide">Password must contain at least one capital letter</li>
        <li id="number" class="hide">Password must contain at least one number</li>
      </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>
diff --git a/main.css b/main.css
 ul#errors {
  color: red;
 }

 .show{
 	visibility: visible;
 }

 .hide{
 	visibility: hidden;
 }
	var validateEmail = function(email){
	if (email.match(/\w+\.\w{3,6}/))
	return true;
	else
	return false;
	};

	var validatePasswordLength = function(password){
	if (password.length >= 8)
	return true;
	else
	return false;
	};

	var validatePasswordCapital = function(password) {
	if (password.match(/[A-Z]/))
	return true;
	else
	return false;
	};

	var validatePasswordNumber = function(password) {
	if (password.match(/[0-9]/))
	return true;
	else
	return false;
	}


	// shorthand for $(document).ready();
	$(function(){
	// $('#errors > li').hide();

	$(document).on('keyup', function(event){
	event.preventDefault();


	var email = $('#email').val();
	var password = $('#password').val();


	//Email
	if (validateEmail(email))
	$('#email-error').addClass('hide');
	else
	$('#email-error').removeClass('hide');


	//Password Length
	if (validatePasswordLength(password))
	$('#length').addClass('hide');
	else
	$('#length').removeClass('hide');

	//Password Capital
	if (validatePasswordCapital(password))
	$('#capital').addClass('hide');
	else
	$('#capital').removeClass('hide');

	//Password Number
	if (validatePasswordNumber(password))
	$('#number').addClass('hide');
	else
	$('#number').removeClass('hide');

	//Hide submit until all fields are correct
	if ($('#errors li').length === $('#errors li.hide').length)
	$('#submit').removeClass('hide');
	else
	$('#submit').addClass('hide');
	})

	});

	// 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
	<!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 type="password" id="password" name="password" />

	<button id="submit" class="hide" type="submit">Sign Up</button>

	<ul id="errors">
	<li id="email-error" class="hide">Invalid email</li>
	<li id="length" class="hide">Password must be at least 8 characters long</li>
	<li id="capital" class="hide">Password must contain at least one capital letter</li>
	<li id="number" class="hide">Password must contain at least one number</li>
	</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>
	ul#errors {
	color: red;
	}

	.show{
	visibility: visible;
	}

	.hide{
	visibility: hidden;
	}