CODEWITHSUNDEEP
phpjavascriptjquerypasswords
4WebDev
4WebDev

Reputation: 85

Confirm 2 password fields via jQuery

I am trying to find a small script where while typing in the two password fields and if the passwords do not match then the script will specify... I also hope to do this without having to click the Submit button.

Here are my two fields:

<input name="password" type="password" id="password-1" maxlength="30" placeholder="Password Must Be 5-30 Characters" class="text-input required password">
<input name="password" type="password" id="password-2" placeholder="Repeat Password" class="text-input required password">

Upvotes: 3

Views: 8661

Answers (3)

redDevil
redDevil

Reputation: 1919

change the input field names,

<input name="password1" type="password" id="password-1" maxlength="30" placeholder="Password Must Be 5-30 Characters" class="text-input required password">
<input name="password2" type="password" id="password-2" placeholder="Repeat Password" class="text-input required password">

and use the following script,

$("#password-2").change(function(){
     if($(this).val() != $("#password-1").val()){
               alert("values do not match");
               //more processing here
     }
});

If you want to use more functions, you should think of using a jquery plugin like jquery Validate

Upvotes: 4

JKirchartz
JKirchartz

Reputation: 18042

You can do it like:

$('.password').change(function(){
      if($("#password-1").val() == $("#password-2").val()){
            /* they match */
      }else{
            /* they are different */
      }
 });

this will hook onto the class you put on both these fields, and whenever somebody changes either field it will perform this check.

you could also use $('input[type=password]') if you didn't have those classes...

here's some further reading:

http://www.designchemical.com/blog/index.php/jquery/check-passwords-using-jquery/

http://bmharwani.com/blog/2010/11/12/matching-the-password-and-confirm-password-fields-in-jquery/

Upvotes: 3

csturtz
csturtz

Reputation: 6580

you can get this out of the box with the jquery validation plugin. There are lots of docs and tutorials for you to follow including those for making sure two fields match.

Upvotes: 0

Related Questions