I have a registration form with "password" and "confirm password" input fields. I want to check if the "confirm password" matches the "password" while the user is typing it and give the appropriate message. So I tried to do this:
This is the HTML:
<div class="td">
<input type="password" id="txtNewPassword" />
</div>
<div class="td">
<input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>
And this is the checkPasswordMatch() function:
function checkPasswordMatch() {
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();
if (password != confirmPassword)
$("#divCheckPasswordMatch").html("Passwords do not match!");
else
$("#divCheckPasswordMatch").html("Passwords match.");
}
That didn't validate while typing, only when user leaves the field.
I tried to use onKeyUp instead of onChange - also didn't work.
So how can it be done?
Thank you!
This question is related to
javascript
jquery
$('#txtConfirmPassword').keyup(function(){
if($(this).val() != $('#txtNewPassword').val().substr(0,$(this).val().length))
{
alert('confirm password not match');
}
});
The problem in this case is that onchange-event does not fire until the input looses focus, so you will probably want to listen for the keyup-event instead, which is fired on every keystroke.
Also, I would prefer not using inline-javascript, but rather catch the event using jQuery instead.
$("#txtConfirmPassword").keyup(checkPasswordMatch);
Here's a working jsfiddle
Things to note:
In saying that, validation is a solved problem there are frameworks that implement this functionality.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
I'd suggest using one of these rather than reimplementing Validation for every app you write.
The onkeyup event does "work" as you intend:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
function checkPasswordMatch() {
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();
if (password != confirmPassword)
$("#divCheckPasswordMatch").html("Passwords do not match!");
else
$("#divCheckPasswordMatch").html("Passwords match.");
}
//--></script>
</head>
<body>
<div class="td">
<input type="password" id="txtNewPassword" />
</div>
<div class="td">
<input type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>
</body>
</html>
$(function() {
$("#txtConfirmPassword").keyup(function() {
var password = $("#txtNewPassword").val();
$("#divCheckPasswordMatch").html(password == $(this).val()
? "Passwords match."
: "Passwords do not match!"
);
});
});?
if we use bootstrap our text will be green or red depending on the result
HTML
<div class="col-12 col-md-6 col-lg-4 mb-3">
<label class="form-group d-block mb-0">
<span class="text-secondary d-block font-weight-semibold mb-1">New Password</span>
<input type="password" id="txtNewPassword" class="form-control">
</label>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-3">
<label class="form-group d-block mb-0">
<span class="text-secondary d-block font-weight-semibold mb-1">Confirm Password
</span>
<input class="form-control" type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();">
</label>
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
CSS
.text-success {
color: #28a745;
}
.text-danger {
color: #dc3545;
}
JS
function checkPasswordMatch() {
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();
if (password != confirmPassword)
$("#divCheckPasswordMatch").html("Passwords do not match!").addClass('text-danger').removeClass('text-success');
else
$("#divCheckPasswordMatch").html("Passwords match.").addClass('text-success').removeClass('text-danger');
}
Source: Stackoverflow.com