I have created some code for a login page. What I want is, if the username and password are correct, then go to the Home.html page. Otherwise, stay on the login page but only give the user 3 attempts to log in. I can't seem to figure out what is wrong as it doesn't count how many attempts I make nor does it redirect to the Home.html page when I get it right.

var counter = 0;

function checkdetails() {
  var name = "",
    password = "";

  name = form1.txtusername.value
  password = form1.txtpassword.value

  if (name == "Shauna" && password == "8nss") {
    window.alert("Both right")
    window.location.replace("Home.html");

    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name == "Shauna" && password != "8nss") {
    window.alert("Incorrect Password.")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name != "Shauna" && password == "8nss") {
    window.alert("Incorrect Username")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  } else if (name != "Shauna" && password != "8nss") {
    window.alert("Both Wrong")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  }
  if (counter == 3) {
    window.alert("Incorrect details - Login failed")
    window.close()
  }

}

<form action="" method="post" name="form1" onsubmit="checkdetails()">
  <table bgcolor="white" width="500" border="0" align="center">
    <col width="200">
      <col width="200">


        <tr>
          <th colspan="2" align="center" bgcolor="grey">Login</th>
        </tr>


        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="center">Username</td>
        </tr>

        <tr>
          <td colspan="2" align="center">
            <label>
              <input type="text" name="txtusername" id="txtusername" class="info" required/>
            </label>
          </td>

          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Password</td>
          </tr>


          <tr>
            <td colspan="2" align="center">
              <label>
                <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
              </label>
            </td>
          </tr>



          <tr>
            <td>&nbsp;</td>
          </tr>


          <tr>
            <td colspan="2">
              <label>
                <input type="checkbox" name="terms" value="terms" id="terms" />Remember Me</label>
            </td>
          </tr>
          <br>
          <br>
          <br>
          <tr>
          </tr>


          <tr>
            <td>&nbsp;</td>
          </tr>

          <tr>
            <td>
              <label>
                <input type="submit" name="Login" id="Login" value="Login" />
              </label>
            </td>
            <td>
              <label>
                <input type="reset" name="Reset" id="Reset" value="Reset" />
              </label>
            </td>
          </tr>
  </table>
</form>

I have created some code for a login page. What I want is, if the username and password are correct, then go to the Home.html page. Otherwise, stay on the login page but only give the user 3 attempts to log in. I can't seem to figure out what is wrong as it doesn't count how many attempts I make nor does it redirect to the Home.html page when I get it right.

var counter = 0;

function checkdetails() {
  var name = "",
    password = "";

  name = form1.txtusername.value
  password = form1.txtpassword.value

  if (name == "Shauna" && password == "8nss") {
    window.alert("Both right")
    window.location.replace("Home.html");

    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name == "Shauna" && password != "8nss") {
    window.alert("Incorrect Password.")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name != "Shauna" && password == "8nss") {
    window.alert("Incorrect Username")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  } else if (name != "Shauna" && password != "8nss") {
    window.alert("Both Wrong")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  }
  if (counter == 3) {
    window.alert("Incorrect details - Login failed")
    window.close()
  }

}

<form action="" method="post" name="form1" onsubmit="checkdetails()">
  <table bgcolor="white" width="500" border="0" align="center">
    <col width="200">
      <col width="200">


        <tr>
          <th colspan="2" align="center" bgcolor="grey">Login</th>
        </tr>


        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="center">Username</td>
        </tr>

        <tr>
          <td colspan="2" align="center">
            <label>
              <input type="text" name="txtusername" id="txtusername" class="info" required/>
            </label>
          </td>

          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Password</td>
          </tr>


          <tr>
            <td colspan="2" align="center">
              <label>
                <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
              </label>
            </td>
          </tr>



          <tr>
            <td>&nbsp;</td>
          </tr>


          <tr>
            <td colspan="2">
              <label>
                <input type="checkbox" name="terms" value="terms" id="terms" />Remember Me</label>
            </td>
          </tr>
          <br>
          <br>
          <br>
          <tr>
          </tr>


          <tr>
            <td>&nbsp;</td>
          </tr>

          <tr>
            <td>
              <label>
                <input type="submit" name="Login" id="Login" value="Login" />
              </label>
            </td>
            <td>
              <label>
                <input type="reset" name="Reset" id="Reset" value="Reset" />
              </label>
            </td>
          </tr>
  </table>
</form>

• javascript
• html

Share Improve this question Follow edited Apr 28, 2016 at 21:31 ManoDestra 6,50366 gold badges2929 silver badges5050 bronze badges asked Apr 28, 2016 at 14:08 user6267046user6267046 8

• 3 You're aware that's pletely unsecure, right? You must never rely on client side code to validate passwords, specially hard-coded like the example you providade. – Vitor Rigoni Commented Apr 28, 2016 at 14:10
• I think he use this as a prototype. @VitorRigoni – SaidbakR Commented Apr 28, 2016 at 14:11
• use cookie to store data,when it is invalid .stackoverflow./questions/16746288/javascript-login-cookies – jewelhuq Commented Apr 28, 2016 at 14:12
• its just a small assignment for college. – user6267046 Commented Apr 28, 2016 at 14:12
• 2 No college should ever teach you logging in on the client side like that. – Shomz Commented Apr 28, 2016 at 14:29

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

Here's one way of doing what you're trying to do via JavaScript. I'm handling the onsubmit of the form and using JavaScript to validate it and return true or false to the handler, depending on how well it validated. I removed quite a bit of the duplication of code effort too and simplified the logic.

NB this is a very poor way of handling logins and client side validation of login attempts, but given that it's just for an assignment exercise, this is just one way to do what you need.

<meta charset="UTF-8">
<script>
var remainingAttempts = 3;

function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
    console.log('name', name);
    console.log('password', password);
    var validUsername = validateUsername(name);
    var validPassword = validatePassword(password);
    if (validUsername && validPassword) {
        alert('Login successful');
    } else {
        form1.txtusername.value = '';
        form1.txtpassword.value = '';
        remainingAttempts--;

        var msg = '';
        if (validPassword) {
            msg += 'Username incorrect: ';
        } else if (validUsername) {
            msg += 'Password incorrect: ';
        } else {
            msg += 'Both username and password are incorrect: ';
        }

        msg += remainingAttempts + ' attempts left.';
        alert(msg);

        if (remainingAttempts <= 0) {
            alert('Closing window...');
            window.close();
        }
    }

    return validUsername && validPassword;
}

function validateUsername(username) {
    return username == 'Shauna';
}

function validatePassword(password) {
    return password == '8nss';
}
</script>

<form id="form1" name="form1" method="post" action="Home.html" onsubmit="return checkDetails();">
<table>
<tr>
<th colspan="2" align="center" bgcolor="grey">Login</th></tr>
Username
<tr><td colspan="2" align="center"><label><input type="text" name="txtusername" id="txtusername" class="info" required /></tr>
<tr><td>&nbsp;</td></tr>
<tr><td colspan="2" align="center">Password</td></tr>
<tr>
    <td colspan="2" align="center"><label>
    <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
  </label></td>
</tr>
<tr>
    <td colspan="2">
        <label>
        <input type="checkbox" name="terms" value="terms" id="terms"/>Remember Me</label>
    </td>
</tr>
<br><br><br>
<tr>
</tr>
<tr>
    <td>
        <label>
        <input type="submit" name="Login" id="Login" value="Login"/>
        </label>
    </td>
    <td>
        <label>
        <input type="reset" name="Reset" id="Reset" value="Reset" />
        </label>
    </td>
</tr>
</table>
</form>

Enforcing a limit on login attempts on the client end is a serious security problem. I wrote scrapers that reverse-engineered what the JavaScript on a page did and submitted valid looking requests. A programmer could easily write a script that uses curl to keep trying username/password binations until they succeed without worrying about your JavaScript. You should make sure that the server blocks excessive login attempts before you worry about how the client end works.

If you want to redirect user in JavaScript you should do

function Redirect() {
    window.location="http://target.url";
}

Assimilated this, is foolish manage login in JavaScript so I think you should read something that explain differences between client-side and server-side executed code.

EDIT. For managing the max three-time login you can store data in Local Storage