abedsujan/jquery_signup_password_match.js

## jquery_signup_password_match.js
//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");

//Hide hints
$("form span").hide();

function isPasswordValid() {
  return $password.val().length > 8;
}

function arePasswordsMatching() {
  return $password.val() === $confirmPassword.val();
}

function canSubmit() {
  return isPasswordValid() && arePasswordsMatching();
}

function passwordEvent(){
    //Find out if password is valid
    if(isPasswordValid()) {
      //Hide hint if valid
      $password.next().hide();
    } else {
      //else show hint
      $password.next().show();
    }
}

function confirmPasswordEvent() {
  //Find out if password and confirmation match
  if(arePasswordsMatching()) {
    //Hide hint if match
    $confirmPassword.next().hide();
  } else {
    //else show hint
    $confirmPassword.next().show();
  }
}

function enableSubmitEvent() {
  $("#submit").prop("disabled", !canSubmit());
}

//When event happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

//When event happens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

enableSubmitEvent();

## jquery_signup_password_match_index.html
<!DOCTYPE html>
<html>
<head>
	<title>Sign Up Form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script>
body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px
}
form {
  background: #fff;
  padding: 4em 4em 2em;
  max-width: 400px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: 5px;
}
p {
  margin: 0 0 3em 0;
  position: relative;
}
label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 .5em;
  color: #333;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none
}
input[type="text"],
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1.6em;
  padding: .8em .5em;
  border-radius: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus {
  background: #fff
}
span {
  border-radius: 5px;
  display: block;
  font-size: 1.3em;
  text-align: center;
  position: absolute;
  background: #2F558E;
  left: 105%;
  top: 25px;
  width: 160px;
  padding: 7px 10px;
  color: #fff;
}
span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}
input[type="submit"] {
  background: #2F558E;
  box-shadow: 0 3px 0 0 #1D3C6A;
  border-radius: 5px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 2em 0 0;
  outline: none;
  padding: .8em 0;
  text-shadow: 0 1px #68B25B;

}
</script>
</head>
<body>

	<form action="#" method="post">
		<p>
			<label for="username">Username</label>
			<input id="username" name="username" type="text">
		</p>
		<p>
			<label for="password">Password</label>
			<input id="password" name="password" type="password">
			<span>Enter a password longer than 8 characters</span>
		</p>
		<p>
			<label for="confirm_password">Confirm Password</label>
			<input id="confirm_password" name="confirm_password" type="password">
			<span>Please confirm your password</span>
		</p>
		<p>
			<input type="submit" value="SUBMIT" id="submit">
		</p>
	</form>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery_signup_password_match.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
	//Problem: Hints are shown even when form is valid
	//Solution: Hide and show them at appropriate times
	var $password = $("#password");
	var $confirmPassword = $("#confirm_password");

	//Hide hints
	$("form span").hide();

	function isPasswordValid() {
	return $password.val().length > 8;
	}

	function arePasswordsMatching() {
	return $password.val() === $confirmPassword.val();
	}

	function canSubmit() {
	return isPasswordValid() && arePasswordsMatching();
	}

	function passwordEvent(){
	//Find out if password is valid
	if(isPasswordValid()) {
	//Hide hint if valid
	$password.next().hide();
	} else {
	//else show hint
	$password.next().show();
	}
	}

	function confirmPasswordEvent() {
	//Find out if password and confirmation match
	if(arePasswordsMatching()) {
	//Hide hint if match
	$confirmPassword.next().hide();
	} else {
	//else show hint
	$confirmPassword.next().show();
	}
	}

	function enableSubmitEvent() {
	$("#submit").prop("disabled", !canSubmit());
	}

	//When event happens on password input
	$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

	//When event happens on confirmation input
	$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

	enableSubmitEvent();
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sign Up Form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script>
	body {
	background: #384047;
	font-family: sans-serif;
	font-size: 10px
	}
	form {
	background: #fff;
	padding: 4em 4em 2em;
	max-width: 400px;
	margin: 100px auto 0;
	box-shadow: 0 0 1em #222;
	border-radius: 5px;
	}
	p {
	margin: 0 0 3em 0;
	position: relative;
	}
	label {
	display: block;
	font-size: 1.6em;
	margin: 0 0 .5em;
	color: #333;
	}
	input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	outline: none
	}
	input[type="text"],
	input[type="password"] {
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	font-size: 1.6em;
	padding: .8em .5em;
	border-radius: 5px;
	}
	input[type="text"]:focus,
	input[type="password"]:focus {
	background: #fff
	}
	span {
	border-radius: 5px;
	display: block;
	font-size: 1.3em;
	text-align: center;
	position: absolute;
	background: #2F558E;
	left: 105%;
	top: 25px;
	width: 160px;
	padding: 7px 10px;
	color: #fff;
	}
	span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #2F558E;
	border-width: 8px;
	margin-top: -8px;
	}
	input[type="submit"] {
	background: #2F558E;
	box-shadow: 0 3px 0 0 #1D3C6A;
	border-radius: 5px;
	border: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 2em;
	line-height: 1.6em;
	margin: 2em 0 0;
	outline: none;
	padding: .8em 0;
	text-shadow: 0 1px #68B25B;

	}
	</script>
	</head>
	<body>

	<form action="#" method="post">
	<p>
	<label for="username">Username</label>
	<input id="username" name="username" type="text">
	</p>
	<p>
	<label for="password">Password</label>
	<input id="password" name="password" type="password">
	<span>Enter a password longer than 8 characters</span>
	</p>
	<p>
	<label for="confirm_password">Confirm Password</label>
	<input id="confirm_password" name="confirm_password" type="password">
	<span>Please confirm your password</span>
	</p>
	<p>
	<input type="submit" value="SUBMIT" id="submit">
	</p>
	</form>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery_signup_password_match.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>