CODEWITHSUNDEEP
javascriptjqueryvalidation
dochsner
dochsner

Reputation: 249

Jquery validate only partially working

So I'm using jquery validate to validate a form, and it's working for the most part, but my confirm password input isn't doing anything. It doesn't show that it's a required field, when I'm telling it to be required just like the rest of the fields, and the equalTo: method I'm using doesn't work, however I don't think the equalTo: method is the problem because the required:true doesn't work either.

Here's my JQuery

    <script type="text/javascript">
(function($,W,D)
        {
            var JQUERY4U = {};

            JQUERY4U.UTIL =
            {
                setupFormValidation: function()
                {
                    //form validation rules
                    $("#user").validate({
                        wrapper: 'div',
                        errorLabelContainer: "#messageBox",
                        debug: false,
                        rules: {
                            username: {
                                required: true,
                                minlength: 5    
                            },
                            password: {
                                required: true,
                                minlength: 5
                            },
                            confirmPassword: {
                                required: true,
                                equalTo: "#password"
                            },
                            termsOfService: "required",
                        },
                        messages: {
                            username: {
                                required: "Please enter a username",
                                minlength: "Must be at Least 5 characters",
                                },
                            password: {
                                required: "Please enter a password",
                                minlength: "Must be at least 5 characters"
                            },
                            confirmPassword:{
                                required: "Confirm Password required",
                                equalTo: "Passwords don't match"
                                },
                            termsOfService: "please accept our terms of service",
                        },
                        submitHandler: function(form) {
                            form.submit();
                        }
                    });
                }
            }

            //when the dom has loaded setup form validation rules
            $(D).ready(function($) {
                JQUERY4U.UTIL.setupFormValidation();
            });

        })(jQuery, window, document);
</script>

and here's my jsp page form

<form:form commandName="user" method="POST">
Username: <br><form:input path="username"/><br><br>
Password: <br><form:password path="password"/><br><br>

Confirm Password: <br><input type="password" id="confirmPassword"/><br><br>

Terms of Service<form:checkbox path="termsOfService" id="termsOfService" style="vertical-align: middle; margin-left: 15px;"/><br><br>

<input type ="submit" id="submitBtn" value="Submit"/><br><br>

</form:form>

Upvotes: 0

Views: 153

Answers (1)

Shehary
Shehary

Reputation: 9992

As mentioned in comment, I'm not familiar with JSP but very much familiar with jQuery validation plugin,

First your are missing id="password" to password input

<form:password path="password" id="password" />

and then path to confirm password input

<form:password path="confirmPassword" id="confirmPassword"/>

jQuery validation plugin to set the rules based on inputs name attributes or in JSP path so not able to find confirm password because of missing path and equalTo failing because you binding it with "#password" but no id="password" given in password input

Upvotes: 1

Related Questions