Checking passwords using Javascript in HTML

Question

This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).

Thanks!!! I've written a javascript function near the bottom....

        <form class="form-horizontal" role="form" method="post" action="index.php">
          <div class="form-group">
              <label for="name" class="col-sm-2 control-label">Name</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="email" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="password" class="col-sm-2 control-label">Create a password</label>
              <div class="col-sm-10">
                  <input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="password" class="col-sm-2 control-label">Confirm password</label>
              <div class="col-sm-10">
                  <input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-10 col-sm-offset-2">
                  <input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                  <script>
                  function checkPassword{
                    var1 = document.getElementById("password1");
                    var2 = document.getElementById("password2");
                    var n = var1.localeCompare(var2)
                    if(n == 0){
                      return true;
                      alert("Passwords do not match, please try again!");
                    }
                    return false;

                    }

                   </script>
              </div>
          </div>
      </form>

Answer 1

delete onclick="checkPassword()" from submit tag

and in form tag add

onsubmit="return checkPassword()"

Answer 2

var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;

Also n===0 means, it matches and alert after return statement won't work.

Answer 3

You are comparing the elements, not the values. Get the values from the elements:

var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;

Return false if you want to stop the submission, and show the message before calling return . The localeCompare method returns a non-zero value if the strings are different:

if(n != 0){
  alert("Passwords do not match, please try again!");
  return false;
}
return true;

Instead of using the click event on the button, use the submit event on the form:

<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">

Answer 4

First switch lines with return and alert.

var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;

if( pw1 !== pw2 )
{
   alert("Passwords do not match, please try again!");
   return true;
}

I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.

Answer 5

Changed your code slightly:

<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
      <div class="form-group">
          <label for="name" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
              <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Create a password</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Confirm password</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
              <input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
          </div>
      </div>
  </form>

  <script>
              function checkPassword(){
                var1 = document.getElementById("password1");
                var2 = document.getElementById("password2");
                if(var1.value != var2.value){
                    alert("Passwords do not match, please try again!");
                    return false;   
                    }
                    else{
                        return true;
                    }
                }
               </script>

Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.