CODEWITHSUNDEEP
javascriptjqueryhtmlpasswords
Eddie McGrady
Eddie McGrady

Reputation: 25

Password confirmation isn't working

For the life of me, I can't figure out what I've done wrong. I want a message to pop up when someone tries entering passwords that don't match below is the form code. 

function passcheck() {
  var p1 = _("pass1").value;
  var p2 = _("pass2").value;
  if (p1 != p2) {
    status.innerHTML = "Your passwords don't match";
  }
}
<form name="signupform" id="signupform" onSubmit="return false;"><div id="password">Create Password:</div>
  <input id="pass1" type="password" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
  <div id="confirm">Confirm Password:</div>
  <input id="pass2" type="password" onBlur="passcheck()" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">

What am I missing?

Upvotes: 0

Views: 74

Answers (4)

Hema Nandagopal
Hema Nandagopal

Reputation: 678

$("#pass2").change(function() {

  var p1 = $("#pass1").val();
  var p2 = $("#pass2").val();
  
  if (p1 ===  p2) {
     
  }
  else{  
    document.getElementById("passwordMatch").innerHTML = "Your passwords don't match";

}
});
#passwordMatch{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pass1" type="password"  maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
        <div id="confirm">Confirm Password:</div>
        <input id="pass2" type="password" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
        
        <div id="passwordMatch"></div>

First of all , create a div separately to show the error msg.You have used "status" which is not used any where.

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try this one

function passcheck() {
  var p1 = document.getElementById("p1").value;
  var p2 = document.getElementById("p2").value;
  if (p1 != p2) {
    document.getElementById("status").innerHTML = "Your passwords don't match";
  }
}
<form name="signupform" id="signupform" onSubmit="return false;">
  <div id="password">Create Password:</div>
  <input id="p1" type="password" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
  <div id="confirm">Confirm Password:</div>
  <input id="p2" type="password" onBlur="passcheck()" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
  
  <div id="status" style='color:red'></div>

Upvotes: 0

Santhosh S Kashyap
Santhosh S Kashyap

Reputation: 1068

function passcheck() {
  var p1 = $("#pass1").val();
  var p2 = $("#pass2").val();
  if (p1 != p2) {
    status.innerHTML = "Your passwords don't match";
  }
}

Since you have tagged Jquery I am assuming u have Jquery in your HTML

In Jquery $("#idoftheField").val() to get value of the field

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

I removed the onFocus() because you didn't provide the script for it, and I added document.getElementById() for both p1 and p2 so that you can get their value

function passcheck() {
  var p1 = document.getElementById("pass1").value;
  var p2 = document.getElementById("pass2").value;
  var result = document.getElementById("status");
  if (p1 != p2) {
    result.innerHTML = "Your passwords don't match";
  }
}
<form name="signupform" id="signupform" onSubmit="return false;">
  <div id="password">Create Password:</div>
  <input id="pass1" type="password" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
  <div id="confirm">Confirm Password:</div>
  <input id="pass2" type="password" onBlur="passcheck()" maxlength="88" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
  <p id="status"></p>
</form>

Upvotes: 0

Related Questions