JavaScript not functioning correctly

Question

I have this js code to validate the registration before the user is able to click on the submit button. This function is activated through onkeyup="validatePassword()" in the password field. It requires the user to fill in all the required field before the submit button is enabled. But for some reason, the function could not identify the if (pw.lenght < 6) what did I do wrong here?

Some restriction: I am not using the form tag here.

 function validatePassword() { var firstname = document.getElementById("firstname").value; var username = document.getElementById("username").value; var email = document.getElementById("email").value; var pw = document.getElementById("pw").value; var pwMsg = ""; var msg = "Please fill in the required fields"; console.log(pw.length); if (pw.length < 6) { pwMsg = "Password should be between 6 and 8 characters"; document.getElementById("pwMsg").innerHTML = pwMsg; document.getElementById("register-btn").disabled = true; } else { document.getElementById("register-btn").disabled = false; } if (firstname == "") { document.getElementById("firstname").focus(); document.getElementById("msg").innerHTML = msg; document.getElementById("register-btn").disabled = true; } else { document.getElementById("register-btn").disabled = false; } if (username == "") { document.getElementById("username").focus(); document.getElementById("msg").innerHTML = msg; document.getElementById("register-btn").disabled = true; } else { document.getElementById("register-btn").disabled = false; } if (email == "") { document.getElementById("email").focus(); document.getElementById("msg").innerHTML = msg; document.getElementById("register-btn").disabled = true; } else { document.getElementById("register-btn").disabled = false; } }

 <div class="section"> <span style="color: red;"><p id="msg" class="center-align"></p></span> <div class="input-field col s12 m6"> <input type="text" name="firstname" class="validate" id="firstname" required> <label for="firstname">First Name</label> <span id="fname-msg" class="helper-text" data-error="Required"></span> </div> <div class="input-field col s12 m6"> <input type="text" name="lastname" class="validate" id="lastname"> <label for="lastname">Last Name</label> <span id="lname-msg" class="helper-text"></span> </div> <div class="input-field col s12 m6"> <select name="gender" id="gender"> <option value="" disabled selected>Select Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> <label>Gender</label> </div> <div class="input-field col s12 m6"> <input type="text" name="username" class="validate" id="username" required> <label for="username">Username</label> <span id="uname-msg" class="helper-text" data-error="Required"></span> </div> <div class="input-field col s12 m6"> <input type="email" name="email" class="validate" id="email" required> <label for="email">Email</label> <span id="email-msg" class="helper-text" data-error="Invalid Email"></span> </div> <div class="input-field col s12 m6"> <input type="password" name="password" class="validate" maxlength="8" id="pw" onkeyup="validatePassword()" required> <label for="password">Password</label> <span style="color: red;"><p id="pwMsg" class="left-align"></p></span> <span style="color: red;"><s:property value="msg" /></span> </div> <div class="col s12 left-align"> <p> Got an account? Sign in <a href="login">Here</a> </p> </div> <div class="row right-align"> <a href="home" class="waves-effect waves-light btn-flat red-text">CANCEL</a> <a class="waves-effect waves-light btn modal-trigger indigo darken-4" data-target="confirmation" id="register-btn" onClick="transferRegistration()" disabled>REGISTER</a> </div> </div>

Answer 1

The problem with the code is that you have separated the validation function into individual if-else statements. As in you have separate if-else statements to validate each of the individual fields.

Also since each of the else statement is essentially effecting the same HTML element, one else can over ride the other. I would suggest removing the unnecessary else statements and changing some of the if statements to an 'else if' statement

Another change I would suggest is to change the tag of the submit button. change it from a to button (it should work with materialize)

function validatePassword(){
    var firstname = document.getElementById("firstname").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var pw = document.getElementById("pw").value;
    var pwMsg = "";
    var msg = "Please fill in the required fields"; 

    if (pw.length < 6 ){
        pwMsg = "Password should be between 6 and 8 characters";
        document.getElementById("pwMsg").innerHTML = pwMsg;
        document.getElementById("register-btn").disabled = true;
        console.log("button disabled")
    } else if (firstname == ""){
        document.getElementById("firstname").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else if (username == ""){
        document.getElementById("username").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    }  else if (email == ""){
        document.getElementById("email").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else {
        document.getElementById("pwMsg").innerHTML = "";
        document.getElementById("register-btn").disabled = false;
    }
}