rskelley9/form-validator.js

## form-validator.js
// 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

function User(email,password) {
  this.email = email
	this.password = password
	this.has_Valid_Email = "error, this email is not valid."
	this.has_Valid_Password = "error, this password is not valid"
	this.data - null
}

function User.prototype.checkEmail = 	function() {
	var pattern = new RegExp([a-z0-9]+@[a-z0-9]+\.[a-z]{3});

	return pattern.test(self.email))

}

function User.prototype.checkPassword = function() {
	var patternPassword = new RegExp(^(?=.*\d*)^(?=.*[A-Z]).{8,50}$)


	return pattern.test(self.password)
}

function User.prototype.checkAll = function() {
	if (this.checkPassword && this.checkEmail)
	{
		console.log(this.checkPassword)
		console.log(this.checkEmail)
		this.has_Valid_Email = "this email is valid."
		this.has_Valid_Password = "this password is valid"
		return alert("success");
	}

	else
	{
		console.log(this.checkPassword)
		console.log(this.checkEmail)

		return alert("the input you provided was incomplete or faulty. Please provide a password between 8-50 characters, with at least one number and one capital letter. Please provide a valid email.")
	}
}

User.prototype.packageData = function() {
	this.data = {password_response: this.has_Valid_Password, email_response: this.has_Valid_Email}
}

User.prototype.postAndReroute = function() {
	$.post('/',this.data, function(response) {
		$('.container').html(response);
	});
}

User.prototype.run = function() {
	this.checkAll
	this.packageData
	this.postAndReroute
}

// shorthand for $(document).ready();

$(function(){

	("#sign-up").click(function(event){
		var email = $(":text")
		var password = $(":password")
		var user = new User(email, password);

		event.preventdefault();
		event.
		user.run();

	});

});
 //notes form jquery
// $( "span" ).text( "Validated..." ).show();
//     return;
//   }

//   $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );

## 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 id="sign-up "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;
}
	// 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

	function User(email,password) {
	this.email = email
	this.password = password
	this.has_Valid_Email = "error, this email is not valid."
	this.has_Valid_Password = "error, this password is not valid"
	this.data - null
	}

	function User.prototype.checkEmail = function() {
	var pattern = new RegExp([a-z0-9]+@[a-z0-9]+\.[a-z]{3});

	return pattern.test(self.email))

	}

	function User.prototype.checkPassword = function() {
	var patternPassword = new RegExp(^(?=.\d)^(?=.*[A-Z]).{8,50}$)


	return pattern.test(self.password)
	}

	function User.prototype.checkAll = function() {
	if (this.checkPassword && this.checkEmail)
	{
	console.log(this.checkPassword)
	console.log(this.checkEmail)
	this.has_Valid_Email = "this email is valid."
	this.has_Valid_Password = "this password is valid"
	return alert("success");
	}

	else
	{
	console.log(this.checkPassword)
	console.log(this.checkEmail)

	return alert("the input you provided was incomplete or faulty. Please provide a password between 8-50 characters, with at least one number and one capital letter. Please provide a valid email.")
	}
	}

	User.prototype.packageData = function() {
	this.data = {password_response: this.has_Valid_Password, email_response: this.has_Valid_Email}
	}

	User.prototype.postAndReroute = function() {
	$.post('/',this.data, function(response) {
	$('.container').html(response);
	});
	}

	User.prototype.run = function() {
	this.checkAll
	this.packageData
	this.postAndReroute
	}

	// shorthand for $(document).ready();

	$(function(){

	("#sign-up").click(function(event){
	var email = $(":text")
	var password = $(":password")
	var user = new User(email, password);

	event.preventdefault();
	event.
	user.run();

	});

	});
	//notes form jquery
	// $( "span" ).text( "Validated..." ).show();
	// return;
	// }

	// $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
	<!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 id="sign-up "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>