13

Here is what I am currently using to attempt to validate a form. When I press submit with no values entered into the form, I get the error messages for each of the inputs as expected. However, no matter what I put in newpassword2 or newemail2 they never 'pass' validation. I've tried everything from copy and paste to making them one letter each to no success. Perhaps I am not using the equalTo attribute correctly...

I've also verified that all the names of the selectors agree with the input id's on the form. Also, all of the inputs are contained within the form, so there aren't any outside of the form tags (I read that was an issue with someone else).

$(document).ready(function() { 
    $("#account_data").validate({ 
        rules: { 
            newpassword1: { required: true }, 
            newpassword2: { equalTo: "#newpassword1" },
            newemail1: { required: true, email: true },
            newemail2: { equalTo: "#newemail1" }
        }
    }); 
});
2
  • This question has been solved...almost by pure luck. See below for updates. May 22, 2010 at 8:03
  • 3
    If the question has been solved, you should accept the appropriate solution...
    – dule
    Jan 15, 2014 at 21:49

4 Answers 4

21

If you will use id="password" it won't work. You must use another name for id.

All keys in the rules object refer to the input.name and not input.id

4
  • 2
    any explanation? I can not see why after reading the source code.
    – youzipi
    May 25, 2016 at 5:59
  • 1
    I too am curious about the "why" here
    – Pat Marx
    Oct 27, 2016 at 19:46
  • From the source staticRules[ element.name ] = existingRules; all the keys in the rules object refer to the name of the form element
    – Murali KG
    Feb 4, 2017 at 11:06
  • An id is not even required here. The equalTo parameter simply must be a valid jQuery selector. jsfiddle.net/drt2xqL4
    – Sparky
    Jul 29, 2020 at 17:06
6

Before using "equalTo" we need to take care of following points:

  1. Use different word for input element name and id.

  2. Use input element id in "equalTo" match instead of input element name:

<html>
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js"></script>
    <script src="jquery.validate.min.js"></script>
    <script>
            $(document).ready(function(){
                  $('#btnSubmit').click(function(){
                       $("form").validate({
                         rules: {
                            pwd: {
                                 required: true,
                                 minlength : 6
                             },
                            conf_pwd: {
                                   required: true,
                                   minlength : 6,
                                   equalTo: "#id_pwd"
                                 }
                        },
                        messages: {
                               pwd: {
                                  required: "Please enter the password.",
                                  minlength: "Your password must be at least 6 characters long"
                                },
                              conf_pwd: {
                                 required: "Please enter the confirm password.",
                                 minlength: "Your password must be at least 6 characters long",
                                 equalTo: "Please enter the same password as above"
                              }
                       },
                       submitHandler: function(form) {
                                 form.submit();
                        }
            });
                  });
            });
    </script>
</head>
<body>
       <div>
        <form id="data" action="" method="post">
        <div class="form-group row">
        <label>Password:</label>
            <div>
            <input id="id_pwd" name="pwd" type="password" />
           </div>
        </div>
        <div>
        <label>Confirm Password:</label>
            <div>
            <input id="id_conf_pwd" name="conf_pwd" type="password" />
           </div>
        </div>
        <div>
        <div>
            <div>
		    <input type="submit"  id="btnSubmit" name="submit" value="Reset Password">
	       </div>
        </div>
       </div>
    </form>
       </div>
</body>
</html>

3
  • Plz correct your code it should be $("#form").validate({ Jan 9, 2020 at 9:26
  • 1
    @Don'tDownvoteMe, it does not matter because his selector matches the <form> element itself.
    – Sparky
    Jul 29, 2020 at 16:46
  • However your .validate() call should not be inside of a click handler since the validate plugin is already capturing this click event.
    – Sparky
    Jul 29, 2020 at 16:47
2

I had the same problem as Tom. The solution was to create an id for the password fields that matched the names for the password fields. (As mentioned by Tom). Definitely a bug in the validation code, because it should just rely on the name field. Oh well...

-Greg

1
  • 1
    Since the equalTo method simply takes a jQuery selector as it's parameter, id is absolutely not requiredl: jsfiddle.net/drt2xqL4
    – Sparky
    Jul 29, 2020 at 17:03
2

@Tom try

        newpassword1: { required: true }, 
        newpassword2: { required: true,equalTo: "#newpassword1"},
        newemail1: { required: true, email: true },
        newemail2: { required: true,email: true ,equalTo: "#newemail1" }

or use the latest version of validation plugin

Now rules have added with password being required set to true and the second condition is for password_again set to required true and it has to “equalTo” the input field with id of password. With these conditions set, we are able to achieve what we are wanting. Do not forget to check the demo of the post to see how it works. For more documentation and resource on this plugin visit jQuery Validation Plugin

1
  • 2
    You know what? I got it to work with exactly the same code I posted in my original post. All I changed was using both an id AND name for the form inputs. I don't know if this is necessary, though, as name does not validate in (X)HTML Strict if I recall correctly. Regardless, the validation plugin is working fine, and my question is now obsolete...sorry for wasting your time! BTW, I added in the other attributes that you suggested and it still worked just fine! THANK YOU FOR YOUR HELP!!! -Tom- May 22, 2010 at 8:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.