Multiple if statements and submit

Form with validation as the user types, want to submit only if true and there is a value in the password box.

by davidpauljunior

HTML

<form id="form-password-change" class="form-validate" method="post" action="/xxxx">
    <div class="control-group">
        <label class="control-label" for="input-username">Username</label>
        <div class="controls">
            <input type="text" id="input-username" name="username" class="required" value="Username" autocomplete="off" />
        </div>
    </div>
    <div id="password-info">
        <ul>
            <li id="letter" class="invalid">At least <strong>3 letters</strong> (a-z)</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" placeholder="Password" autocomplete="off" />
        </div>
    </div>
    <button type="submit" class="btn btn-large btn-wide btn-primary">Send Request</button>
</form>

SCSS

#password-info {
	margin: 20px 0;
	overflow: hidden;
	background: #f0f0f0;
	text-shadow: 0 1px 0 #fff;
	border: 1px solid #ddd;
	.border-radius(5px);
	h2 {
		font-size: @14px;
		font-family: Arial;
		color: @gray;
	}
	ul {
		list-style: none;
		margin: 0;
		li {
			padding: 15px 40px;
			margin: 0 -40px;
			background: #f0f0f0;
			border-top: 1px solid #e6e6e6;
			.transition(ease 250ms);
			.helper {
				float: right;
				color: #ccc;
				font-size: 1.786em;
			}
		}
		li:first-child {
			border-top: 0;
		}
		li.invalid {
			line-height:24px;
			color:#777;
		}
		li.valid {
			line-height:24px;
			color:#3a7d34;
		}
	}
}

JavaScript

$(function () {
    var pwdInput = $('#form-password-change #input-password');
    var pwdInputText = $('#form-password-change #input-password-text'); // This is the input type="text" version for showing password

    var pwdValid = false;

    function validatePwdStrength() {
        pwdValid = false;
        var pwdValue = $(pwdInput).val(); // This works because when it's called it's called from the pwdInput, see end

        // Validate the length
        if (pwdValue.length > 7) {
            $('#form-password-change #length').removeClass('invalid').addClass('valid');
            pwdValid = true;
        } else {
            $('#form-password-change #length').removeClass('valid').addClass('invalid');
        }

        // RegExp
        // Validate number of letters letters
        if (/([^a-z]*[a-z]){3,}/i.test(pwdValue)) {
            $('#letter').removeClass('invalid').addClass('valid');
            pwdValid = pwdValid && true;
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
            pwdValid = false;
        }
    };

    function validatePwdValid() {
        if (pwdValid == true) {
            event.preventDefault();
            alert('Password Validated');
        } else {
            event.preventDefault();
            alert('Password Failed');
        }
    };

    pwdInput.bind('change keyup input', validatePwdStrength); // Keyup is a bit unpredictable
    pwdInputText.bind('change keyup input', validatePwdStrength);
    $('#form-password-change').submit(validatePwdValid);

});