Here we will learn how to check if the password entered in the two input boxes, is correct or not using jquery. In the below example initially there will be two input box with labels password and confirm password. When we type a password in either of the input box and than again we type the same password if it is typed correct we see the message correct else we see Incorrect in case of correct password entered the Submit button will display else it will remain hidden.
For Example: let us create a file confirmpassword.html and place it in our root directory.
<!--doctype html-->
<html>
<head>
<title>Example Forgot Password using Jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> //here we can give the direct path of the jquery file or download and save it in our system and give write the path accordingly.
</head>
<body>
<div>
<span id='message'></span><br/><br/>
<label>password :
<input name="Password" id="firstattempt" type="password" class="passwd"/>
</label>
<br>
<label>confirm password:
<input type="password" name="Confirmpassword" id="secondattempt" class="passwd"/>
</label>
<br/>
<br/>
<input type="button" name="submit" id="check" value="Submit" />
</div>
<script>
$(document).ready(function(){
$('#check').hide();
$('.passwd').val('');
$(document).on('keyup', '.passwd', function(e) {
e.preventDefault();
if($('#secondattempt').val() != $('#firstattempt').val())
{
$('#check').hide();
$('#message').html('Incorrect').css('color', 'red');
}
else
{
$('#check').show();
$('#message').html('Correct').css('color', 'green');
}
});
});
</script>
</body>
</html>
0 Comment(s)