Validating password Match in Javascript

Question

I am trying to validate both passwords field and checking that both of them match but the form still gives an error even if both input boxes have the same password.

JS

var validator = $("#signupform").validate({
  rules: {
    password: {
      required: true,
      minlength: 6
    },

    repeatpassword: {
      required: true,
      minlength: 6,
      equalTo: "#password"
    }

  },
  messages: {
    password: {
      required: "Provide a password",
      minlength: jQuery.format("Enter at least {0} characters")
    },
    repeatpassword: {
      required: "Repeat your password",
      minlength: jQuery.format("Enter at least {0} characters"),
      equalTo: "Your passwords do not match"
    }
  },
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="form-group">
    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
  </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="form-group">
    <input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
  </div>
</div>

Answer 1

Not sure if you knew this but, "It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all." Read More

So I added a form tag.

What I think the issue with the passwords was, your were doing this:

jQuery.format("Enter at least {0} characters")

There is an error in console:

"$.format has been deprecated. Please use $.validator.format instead.";

So I changed your code to:

jQuery. validator .format("Enter at least {0} characters")

 var validator = $("#signupform").validate({ rules: { password: { required: true, minlength: 6 }, repeatpassword: { required: true, minlength: 6, equalTo: "#password" } }, messages: { password: { required: "Provide a password", minlength: jQuery.validator.format("Enter at least {0} characters") }, repeatpassword: { required: "Repeat your password", minlength: jQuery.validator.format("Enter at least {0} characters"), equalTo: "Your passwords do not match" } }, }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <form id="signupform"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6"> </div> </div> <input type="submit" value="Submit"> </form>