Password Validator

Real Time Validation of a password field. Requirements are checked off as they are achieved.

by kthornbloom

HTML

<input type="text" class="account-password" placeholder="Enter Password">
<input type="text" class="account-password matcher" placeholder="Re-type Password">
<br> <span id="pw-length">Must be at least 9 characters</span>

<br> <span id="pw-upper">Must contain at least one upper case letter</span>

<br> <span id="pw-lower">Must contain at least one lower case letter</span>

<br> <span id="pw-number">Must contain at least one number</span>

<br> <span id="pw-special">Must contain at least one special character: !@#$%^&*()+</span>
    
<br> <span id="pw-match">Passwords must match.</span>
    
<br><br>
<input id="password-submit" type="submit" disabled>

CSS

body {
    font-family:sans-serif;
    line-height:1.4em;
    padding:15px;
    font-size:12px;
}
span {
    color:red;
}
input {
    padding:5px;
    outline:none;
}

JavaScript

$('.account-password').on('input', function () {
    
    var pass = $('.account-password').val(),
        match = $('.matcher').val(),
        upperCase = new RegExp('[A-Z]'),
        lowerCase = new RegExp('[a-z]'),
        numbers = new RegExp('[0-9]'),
        special = /[!@#$%^&*()+]/

        // Length
    if (pass.length >= 9) {
        $('#pw-length').css('color', 'green');
    } else {
        $('#pw-length').css('color', '');
    }

    // Upper Case
    if ($(this).val().match(upperCase)) {
        $('#pw-upper').css('color', 'green');
    } else {
        $('#pw-upper').css('color', '');
    }

    // Lower Case
    if ($(this).val().match(lowerCase)) {
        $('#pw-lower').css('color', 'green');
    } else {
        $('#pw-lower').css('color', '');
    }

    // Number
    if ($(this).val().match(numbers)) {
        $('#pw-number').css('color', 'green');
    } else {
        $('#pw-number').css('color', '');
    }

    // Special Character Check
    if ($(this).val().match(special)) {
        $('#pw-special').css('color', 'green');
    } else {
        $('#pw-special').css('color', '');
    }
    
    // Match
    if (pass == match) {
        $('#pw-match').css('color', 'green');
    } else {
        $('#pw-match').css('color', '');
    }
    
    // Enable Submit button
    if (pass.length >= 9 && $(this).val().match(upperCase) && $(this).val().match(lowerCase) && $(this).val().match(numbers) && $(this).val().match(special) && pass == match) {
        $('#password-submit').prop("disabled",false);
    } else {
        $('#password-submit').prop("disabled",true);
    }
    
});