3B Project

by Larry Adams

HTML

<form action="#" name="form" id="form">
<label for="password1">Password</label>
<input type="input" id="password1" size="20" />
<span id="password1Msg" class="hide">1</span>
<br /><br />
<label for="password2">Password</label>
<input type="input" id="password2" size="20" />
<span id="password2Msg" class="hide">2</span>
    
</form>

CSS

span {
    color: red;
}
.show {
    display: inline;
}
.hide {
    display: none;
}
.match {
    color : green;
}

JavaScript

var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');
var password1Msg = document.getElementById('password1Msg');
var password2Msg = document.getElementById('password2Msg');

var minLen = 8;
var maxLen = 8;

password1.addEventListener('blur', function() {
    var len = this.value.length;
    
    if (len < minLen || len > maxLen) {
        password1Msg.innerHTML = 'Value must be at least 8 charcters long';
        password1Msg.setAttribute('class', 'show');
        
        password2.value = '';
        password2.setAttribute('disabled', 'disabled');
        password2Msg.innerHTML = '';
    } else {
        password1Msg.setAttribute('class', 'hide');
        password2.removeAttribute('disabled');
        password2.focus();
    }
});

password2.addEventListener('keyup', function() {
    var password1Val = password1.value;
    var password2Val = password2.value;
    
    if (password1Val == password2Val) {
        password2Msg.innerHTML = 'Match!';
        password2Msg.setAttribute('class', 'match');
    } else {
        password2Msg.innerHTML = 'No match';
        password2Msg.setAttribute('class', 'show');
    }
});    


password1.focus();
password2.setAttribute('disabled', 'disabled');