Password Confirmation Form
HTML
<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>
CSS
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;
}
JAVASCRIPT
//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();
