javascript - Validating Password and Retype Password - Stack Overflow

admin管理员组

文章数量:1277539

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.

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.

• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 24, 2014 at 1:27 user3522121 asked Apr 24, 2014 at 1:21 user3522121user3522121 21533 gold badges1010 silver badges2424 bronze badges 6

• quick and dirty way. w3schools./jsref/event_onchange.asp Oh and you need to get the value. Search for DOM and javascript. – Mingtao Zhang Commented Apr 24, 2014 at 1:28
• @MingtaoZhang Link is different from what i need. – user3522121 Commented Apr 24, 2014 at 1:31
• @MingtaoZhang If you can, try to refrain from referencing w3schools. – Alex L Commented Apr 24, 2014 at 1:37
• @AlexL I think you gave a wrong link.If it was a joke,it was a bad one – user3522121 Commented Apr 24, 2014 at 1:38
• @user3522121 It's most definitely not a joke. Read the page. W3Schools has some awful practices on it and people new to coding are learning the wrong things from visiting that site. I'm not the first one to link to this, I've seen and read a lot of discussions involving this topic. Let me be more clear as to not start anything... It has good stuff and bad stuff, it's best to stay away from the bad stuff though – Alex L Commented Apr 24, 2014 at 1:41

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

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

Another demo = http://jsfiddle/ALk9Z/

disable button demo http://jsfiddle/K2Xdc/

2 things to start with:

• use type=password ~> http://www.w3/TR/html-markup/input.password.html
• use .keyup() API: http://api.jquery./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);
    }
});

If you want to check that before submit you can do that in following way

With plain Jquery:

<p>
<input type="text" name="NPassword" id="first" placeholder="New Password"/></p>
<input type="text" name="RNPassword" id="second" placeholder="Retype New Password"/>
<span id="error" class="hidden">Not Matched"</span>

And then:

EDIT ONCHANGE

   $('#second').keyup(function(e){
           if($('#first').val() !== $('#second').val()){
                $('#error').removeClass('hidden');
                return false; 
           }else{
             $('#error').addClass('hidden');
           }
    });

http://liveweave./yVXnIF

If you use KnockoutJs or AngularJs those have ability to bind verification in model itself.

本文标签： javascriptValidating Password and Retype PasswordStack Overflow