if else loop issue

Question

I've been working on a login form which I've been trying to wrap my head around. Essentially, the if() statement isn't doing what I expect. Even if the core.user/core.pass exactly match the set values, it's not getting to the success case.

   function validateLoginForm()
    {
        //var x = document.forms["myForm"]["username"].value;
        //var y = document.forms["myForm"]["password"].value;
        "use strict";
        var username = document.forms["myForm"]["username"].value;
        var password = document.forms["myForm"]["password"].value;

        console.log("username:" + username);
        console.log("password:" + password);

        var coreUser = "testUser";
        var corePass = "testPass";

        if (username.value === coreUser) {
            console.log("username matches");
            if(password.value === corePass) {
                console.log("You are logged in as " + username.value);


            }
            else {
                alert("Password invalid");
            }
        }


        else {

            alert("Username invalid");
        }

    }




    <div class="loginPage">
                  <div name="myForm" class="form">
                      <div id ="login">
                        <form class="login-form" name="myForm">
                          <h2>Login Page</h2>
                          <input name="username" id="username" type="text" placeholder="enter username"/>
                          <input name="password" id="password" type="password" placeholder="enter password"/>
                          <button type="button" onclick="validateLoginForm()">login</button>
                          <p class="message">Don't have an account? <a href="#register" id="register_profile">Register</a></p>
                        </form>
                      </div>
                  </div>
                </div>

This line here `if (username.value === coreUser) {` should be `if (username === coreUser) {....`. Because its already the value. — kimobrian254, Aug 31 '17 at 15:17
@tiagodws `Why comment instead of posting an answer?` , oh don't go there.. :) Some SO user's like to say `This is not an answer, it's a comment, even when it is an answer,` and then mark you down for it. Sometimes clarification might be needed, but the instant mark down's are what I think some SO users are trying to avoid. Shame really.!! — Keith, Aug 31 '17 at 15:25
@tiagodws I have occasionally posted that beneath an "answer", but this isn't a real question anyway, it'll get deleted soon, so it doesn't really matter whether people post easy answers or rather a comment instead. — , Aug 31 '17 at 15:32
i mean.. unless useless answers get upvoted, then it'l hang around forever. — Kevin B, Aug 31 '17 at 15:39

litelite · Answer 1 · 2017-08-31T15:24:13.060

password and username already contains the value. So you are trying to call .value on a string which returns undefined. Just remove the .value when you are using the password and username variables like this.

 if (username === coreUser) {
     //...
     if(password === corePass) {
         //...

Also, this kind of bug is easilly found with a debugger. You should take the time to learn how to use one as it will save you considerable time in the future. (every modern browser have a JS debugger in the dev tool)

score -1 · Answer 2 · answered Aug 31 '17 at 15:48

You just remove .value from username.value & password.value user like in below username === coreUser
password === corePass

In javascript validation we should have return statement if the value is invalid. for example :

if(username !== coreUser || username ==='') {
    alert("Username invalid");
    return false;
} else if(password !== corePass || password === '') {
    alert("Password invalid");
    return false;
} else {
    console.log("username matches");
    console.log("You are logged in as " + username);
}

if else loop issue

2 Answers2