jQuery Validation Plugin + equalTo Not Working_问答_开发者

jQuery Validation Plugin + equalTo Not Working

开发者 https://www.devze.com 2023-01-01 03:57 出处：网络

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 开发者_如何学Ceverything 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" }
        }
    }); 
});

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

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

Use different word for input element name and id.
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>

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

@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