passwords

by Artur Filipiak

HTML

<input type="text" id=pword1 />
<input type="text" id=pword2 />

    <div id="output" class="panel">

    </div>

CSS

.panel {
    border: 1px solid grey;
    margin: 10px 0;
    padding: 20px;
}

input {
    font-size : 15px;
    background: #fff;
}

.error {
    background: #ffd2d2;
}

.success {
    background: #cbe9ba;
}

JavaScript

var pFields = $('#pword1, #pword2'),
    p1      = $('#pword1'),
    p2      = $('#pword2');

pFields.on('blur', function() {

    var p1Val = p1.val(),
        p2Val = p2.val(), 
        uc    = (p1Val.match(/[A-Z]/)) ? 1 : 0,
        lc    = (p1Val.match(/[a-z]/)) ? 1 : 0,
        nm    = (p1Val.match(/[0-9]/)) ? 1 : 0;

    if(p1Val == ""){
        p1.removeClass('success').addClass('error');
        $('#output').html('p1 is empty');
    }else if(p2Val == ""){
        p2.removeClass('success').addClass('error');
        $('#output').html('p2 is empty');
    }else if(p1Val != p2Val){

        pFields.removeClass('success').addClass('error');
        $('#output').html('p fields do not match');
    }else if(!uc){
        p1.removeClass('success').addClass('error');
        $('#output').html('add a uc');
    }else if(!lc){

        p1.removeClass('success').addClass('error');
        $('#output').html('add a lc');
    }else if(!nm){

        p1.removeClass('success').addClass('error');
        $('#output').html('add a nm');
    }else{

        pFields.removeClass('error').addClass('success');
        $('#output').html('success');
    }
});