Add function to .keyup() with two input fields

Question

I have a password field and a password confirmation field. I'm trying to add keyup to both these fields so that whenever someone starts typing in either, I can show them whether the passwords match or not.

I implemented a version of this which worked, but as you can see, it's not ideal.

function comparePassword() {
  var password1 = $("#password1").val();
  var password2 = $("#password2").val();

  if (password1 != password2) {
    $(".divDoPasswordsMatch").html("Passwords do not match!");
  }
  else {
    $(".divDoPasswordsMatch").html("Passwords match.");
  }

$("#password1, #password2").keyup(comparePassword);

I don't want to set the variables password1 and password2 inside the comparePassword function. This is in part because I need to use this function multiple times. I'd like to pass those two input fields into keyup to look something like this:

$("#password1, #password2").keyup(comparePassword($("#password1").val(), $("#password2").val()));

Ideally, I want comparePassword to know to inherit the values from #password1 and #password2 without me having to specify again:

$("#password1, #password2").keyup(comparePassword(this.value, this.value));

These last two code samples don't work. How should I write this?

Thanks in advance!

Chif · Accepted Answer · 2019-08-05 17:19:17Z

2

You can rearrange the code this way.

//this will be the function that will compare any two different string values
function comparePassword(password1, password2) {
  if (password1 != password2) {
    $(".divDoPasswordsMatch").html("Passwords do not match!");
  }
  else {
    $(".divDoPasswordsMatch").html("Passwords match.");
  }
}
$(document).ready(function(){
$("#password1, #password2").keyup(function(){
  comparePassword($("#password1").val(), $("#password2").val());
});
}
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="password1">
<input type="text" id="password2">
<div class="divDoPasswordsMatch"></div>

edited Aug 5, 2019 at 17:19

answered Aug 5, 2019 at 16:44

Chif

8601 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lennholm · Accepted Answer · 2019-08-05 16:35:53Z

1

You need to create a handler for the event that handles this. Something like this:

var keyupHandler = function() {
  comparePassword($("#password1").val(), $("#password2").val());
};
$("#password1, #password2").keyup(keyupHandler);

The primary reason your code examples don’t work is because they both invoke the functions immediately instead of when the event takes place. That’s what the handler takes care of.

answered Aug 5, 2019 at 16:35

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

1 Comment

maxpelic Over a year ago

You might want to store the password fields in variables to make it run faster, especially since it will be triggered every keypress

Mamdouh Saeed · Accepted Answer · 2019-08-05 17:12:25Z

an example for Jquery

// write mini JQuery plugin
$.fn.isSamePasswords = function(){
return this[0].value === this[1].value
}

//example on keyup
$("#password1, #password2").keyup(function(){
var pm = $("#password1, #password2").isSamePasswords() ? "Passwords match." : "Passwords do not match!"
$(".divDoPasswordsMatch").html(pm);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="password1"/>
<input type="password" id="password1"/>
<br/>
<div class="divDoPasswordsMatch"></div>

Another One

var password_inputs = $("#password1, #password2")

password_inputs.keyup(function(e) {
  var pm = password_inputs[0].value === password_inputs[1].value ? "Passwords match" : "Passwords not match!"
  $(".divDoPasswordsMatch").html(pm);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="password1" />
<input type="password" id="password1" />
<br/>
<div class="divDoPasswordsMatch"></div>

zfrisch · Accepted Answer · 2019-08-05 17:18:15Z

You can use a Cache Constructor to make the process as minimally intensive as possible by saving as many references as it can. This will also attach the handlers to the appropriate place upon Construction.

function Passwords(display, ...sel) {
  this.fields = sel.map(field => $(field));
  this.display = $(display);
  this.toDisplay = (msg) => this.display.html(msg);
  this.theSame = () => new Set(this.fields.map(field => field.val())).size == 1;
  this.compare = () => this.toDisplay(this.theSame() ? "Passwords Match" : "Passwords Do Not Match");
  
  this.fields.forEach(field => field.keyup(this.compare));
  }

 Passwords(".divDoPasswordsMatch", "#password1", "#password2");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="password1" />
<input id="password2" />
<div class="divDoPasswordsMatch">
</div>

Tom O. · Accepted Answer · 2019-08-05 17:18:16Z

You could achieve what you're trying to do by modifying the code like this:

//Create references to required DOM elements once at the beginning of your script
var pw1 = $("#password1");
var pw2 = $("#password2");
var pwMatch = $(".divDoPasswordsMatch");

function comparePassword(password1, password2) {
  if (password1 != password2) {
    pwMatch.html("Passwords do not match!");
  } else {
    pwMatch.html("Passwords match.");
  }
}

$(pw1, pw2).keyup(() => {
  //Pass the values on keyup - dont have to worry about querying the DOM for the input elements again
  comparePassword(pw1.val(), pw2.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Password 1: <input id="password1" type="text" /><br/> Password 2: <input id="password2" type="text" />
<div class="divDoPasswordsMatch"></div>

Collectives™ on Stack Overflow

Add function to .keyup() with two input fields

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related