jQuery Validation Plugin + equalTo Not Working

后端 未结 5 1304
野的像风
野的像风 2020-11-30 13:36

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 a

相关标签:
5条回答
  • 2020-11-30 14:08

    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

    0 讨论(0)
  • 2020-11-30 14:16

    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>

    0 讨论(0)
  • 2020-11-30 14:22

    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

    0 讨论(0)
  • 2020-11-30 14:31

    When using the equalTo you have to use the form name and ID. E.g:

    <input type="password" name="password" id="password" value="" />
    <input type="password" name="password_mirror" value="" />
    
    $("#register_user").validate({
            rules: {
                'password_mirror': {
                    minlength: 5,
                    equalTo: "#password"
                }
            },
            messages: {
                'password_mirror': {
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                }
            }
        });
    
    0 讨论(0)
  • 2020-11-30 14:31

    @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

    0 讨论(0)
提交回复
热议问题