Password Validation

A journey to help implement necessary password rules.

by davidpauljunior

HTML

<form id="reset-password-form" class="form-validate" method="post" action="/xxxxxxxxxxxxxx">
    <div id="password-info">
        <ul>
            <li id="letter" class="invalid">At least <strong>3 letters</strong>
            </li>
            <li id="capital" class="invalid">At least <strong>1 capital letter</strong>
            </li>
            <li id="number" class="invalid">At least <strong>2 numbers</strong>
            </li>
            <li id="length" class="invalid">At least <strong>8 characters</strong>
            </li>
        </ul>
    </div>
    <div class="control-group">
        <label class="control-label" for="input-password">Password</label>
        <div class="controls field">
            <input type="password" id="input-password" name="password" class="required" placeholder="Password" autocomplete="off" />
            <input type="hidden" name="login-form-type" value="pwd" />
        </div>
    </div>
    <button type="submit" class="btn btn-large btn-wide btn-primary">Send Request</button>
</form>

SCSS

#password-info {
    margin: 20px -40px 20px;
    padding: 0 40px;
    overflow: hidden;
    background: #f0f0f0;
    // border-radius: 5px;
    // box-shadow: 0 1px 3px #ccc;
    // border: 1px solid #ddd;
    text-shadow: 0 1px 0 #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    h2 {
        font-size: @14px;
        font-family: Arial;
        color: @gray;
    }
    ul {
        list-style: none;
        margin: 0;
        li {
            padding: 15px 40px 15px 65px;
            margin: 0 -40px;
            background: #f0f0f0;
            border-bottom: 1px solid #ddd;
            .transition(ease 250ms);
        }
        li:last-child {
            border-bottom: 0;
        }
        li.invalid {
            background:url(../img/invalid.png) no-repeat 40px center;
            line-height:24px;
            color:#ec3f41;
        }
        li.valid {
            background:url(../img/valid.png) no-repeat 40px center;
            line-height:24px;
            color:#3a7d34;
        }
    }
}

JavaScript

$('#reset-password-form input[type=password]').keyup(function() {

    // keyup code here
    // set password variable
    var pwd = $(this).val();
    
    // validate the length
    if ( pwd.length < 8 ) {
        $('#length').removeClass('valid').addClass('invalid');
    } else {
        $('#length').removeClass('invalid').addClass('valid');
    }
    
    // RegExp
    // validate letter
    if ( /([^a-z]*[a-z]){3,}/i.test(pwd) ) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
    }
    
    // validate capital letter
    if ( pwd.match(/[A-Z]/) ) {
        $('#capital').removeClass('invalid').addClass('valid');
    } else {
        $('#capital').removeClass('valid').addClass('invalid');
    }
    
    // validate number
    if ( /([^\d]*[\d]){2,}/.test(pwd) ) {
        $('#number').removeClass('invalid').addClass('valid');
    } else {
        $('#number').removeClass('valid').addClass('invalid');
    }
    
})