Question

154

Validating Password and Retype Password

rated 0 times [ 160] [ 6] / answers: 1 / hits: 21823 / 10 Years ago, thu, april 24, 2014, 12:00:00

I am having two textboxes like this :

<p>

<input type=text name=NPassword placeholder=New Password/></p>

<input type=text name=RNPassword placeholder=Retype New Password/>

Now,what i want is that on every keypress of Retype New Password It should check if both are same or not.If yes then in green color display it on right side of RNPassword,Otherwise in red color display that both are not same and also disable the submit button of the page.How this can be done please help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brockg

Add To Favorites

Follow

Total Points: 55

Total Questions: 104

Total Answers: 104

Location: Hungary

Member since Wed, Nov 9, 2022

2 Years ago

answered 10 Years ago amari · Accepted Answer

Try this demo: ==> http://jsfiddle.net/uP8Q2/

Another demo = http://jsfiddle.net/ALk9Z/

disable button demo http://jsfiddle.net/K2Xdc/

2 things to start with:

use type=password ~> http://www.w3.org/TR/html-markup/input.password.html

use .keyup() API: http://api.jquery.com/keyup/

Also next time add your JS code with the post :) rest should fit the need.

code

HTML

<p>

    <input type=password name=NPassword placeholder=New Password id=txtNewPassword />

</p>

<input type=password name=RNPassword placeholder=Retype New Password id=txtConfirmPassword onChange=isPasswordMatch(); />

<div id=divCheckPassword></div>

JS

    function isPasswordMatch() {

    var password = $(#txtNewPassword).val();

    var confirmPassword = $(#txtConfirmPassword).val();



    if (password != confirmPassword) $(#divCheckPassword).html(Passwords do not match!);

    else $(#divCheckPassword).html(Passwords match.);

}



$(document).ready(function () {

    $(#txtConfirmPassword).keyup(isPasswordMatch);

});

Disable button demo code

 $('#hulk').prop('disabled' , true);

$('#txtConfirmPassword').on('keyup', function () {

    var password = $(#txtNewPassword).val();

    var confirmPassword = $(#txtConfirmPassword).val();



    if (password != confirmPassword) {

        $(#divCheckPassword).html(Passwords do not match!);

    } else {

        $(#divCheckPassword).html(Passwords match.);

        $('#hulk').prop('disabled' , false);

    }

});