SpringForm with Jquery Validation not working

Question

i am trying to validate a spring mvc form having spring tags with Jquery but this validation isn't working,need urgent help. The following JS files are being used.

On inspection i am able to see that the values are getting passed by the element id's but the validation and the error messages are not working. Please help as i am not very well versed with Jquery. Your help would be much appreciated.

<script type="text/javascript">
    function submitForm()
    {
        $("#savelogin").validate({      
            rules:
            { 
                UName: 
                {
                    required: true,
                    minlength: 6,
                    maxlength: 40
                },
                pwd:
                { 
                    equired: true,
                    minlength: 6,
                    maxlength: 40
                }
            },
            messages:
            {
                UName:
                {
                    required: "username is required!",
                    minlength: "username must be at least 6 characters long"
                },
                pwd:
                {
                    required: "Please enter a password",
                    minlength: "Password must be at least 6 characters long"
                }
            },
            submitHandler: function(form)
            {
                form.submit();
            }
        });  
    }
</script> 

<title>Login Page</title>
</head>
    <body>
    <form:form commandName="userLogin" id="savelogin">
        <fieldset>
            <c:url value="/Registration.do" var="url"/>
            <a href="<c:out value='${url}'/>">New User:Register</a>
            <div>
                <form:label path="userRegistration.userName" ><spring:message code="label.username"/>   </form:label>
                <form:input path ="userRegistration.userName" autocomplete="on" id="UName" />
                <form:errors path="userRegistration.userName"></form:errors> 
            </div>
            <div>
                <form:label path="userRegistration.password"><spring:message code="label.password"/></form:label>
                <form:password path="userRegistration.password"   id="pwd"/>
                <form:errors path="userRegistration.password"></form:errors>
            </div>

            <div>      
                <input type="submit" value="<spring:message code="label.login"/>" name="loginUser" id="submit" onclick="submitForm();"/>
            </div>
        </fieldset>
    </form:form>
</body>

   $(document).ready(function(){ 

    $("#savelogin").validate({      
       rules:
       { 
          UName: 
         {
             required: true,
             minlength: 6,
             maxlength: 40
         },
         pwd:
         { 
             equired: true,
             minlength: 6,
             maxlength: 40
         }
     },
     messages:
     {
         UName:
         {
             required: "username is required!",
             minlength: "username must be at least 6 characters long"
         },
         pwd:
         {
             required: "Please enter a password",
             minlength: "Password must be at least 6 characters long"
         }
     },
     submitHandler: function(form)
     {
         form.submit();
     }
 });

});

I tried with this but nothing happened. Please check and help.

Sparky · Accepted Answer · 2013-09-19 14:31:52Z

4

Your issues are as follows:

1) The .validate() method is the initialization of the plugin and only needs to be called one time. Place it inside a DOM ready event handler.

2) The rules are only assigned by name attribute, not id. Since your names contain dots, you must enclose them in quotes. See: jqueryvalidation.org/reference/

3) You misspelled required as equired on your password field.

4) If your submitHandler only contains form.submit(), then you don't need it at all. This is the default behavior, so you only need to use the submitHandler callback if you want to do something else upon a valid form.

Documentation: jqueryvalidation.org/documentation/

<script type="text/javascript">

$(document).ready(function() {  // <-- enclose your code in a DOM ready handler

    $("#savelogin").validate({
        rules: {
            "userRegistration.userName": { // <-- assign by field name and use quotes
                required: true,
                minlength: 6,
                maxlength: 40
            },
            "userRegistration.password": {
                required: true,  // <-- this rule was misspelled 'equired'
                minlength: 6,
                maxlength: 40
            }
        },
        messages: {
            "userRegistration.userName": {
                required: "username is required!",
                minlength: "username must be at least 6 characters long"
            },
            "userRegistration.password": {
                required: "Please enter a password",
                minlength: "Password must be at least 6 characters long"
            }
        }
        /*, // submitHandler is not needed for this case
        submitHandler: function (form) {
            form.submit();  // <-- this is the default
        }
        */
    });

});

</script>

Working DEMO: http://jsfiddle.net/kCDDK/

answered Sep 19, 2013 at 14:31

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sparky Over a year ago

@ShivayanMukherjee, "Accept" means to click the green checkmark next to the answer.

Sanshayan Over a year ago

@Sparky Hi, i also had this problem why using input id in validate method is not working?

Sparky Over a year ago

@Sanshayan, because you MUST only use the name within the .validate() method. Refer to documentation.

Dipesh Parmar · Accepted Answer · 2013-09-19 09:27:40Z

0

Initializing validation code inside function will not work you need to write code inside document.ready not inside function.

Or call function on body load.

All You need to do is replace your script tag with below code,

<script type="text/javascript">
    $(function()
    {
        $("#savelogin").validate({      
            rules:
            { 
                UName: 
                {
                    required: true,
                    minlength: 6,
                    maxlength: 40
                },
                pwd:
                { 
                    equired: true,
                    minlength: 6,
                    maxlength: 40
                }
            },
            messages:
            {
                UName:
                {
                    required: "username is required!",
                    minlength: "username must be at least 6 characters long"
                },
                pwd:
                {
                    required: "Please enter a password",
                    minlength: "Password must be at least 6 characters long"
                }
            },
            submitHandler: function(form)
            {
                form.submit();
            }
        });  
    });
</script>

edited Sep 19, 2013 at 9:27

answered Sep 19, 2013 at 9:16

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

5 Comments

Shivayan Mukherjee Over a year ago

i tried with your solution but didn't get the expected result.. posted above is the modified code.

Shivayan Mukherjee Over a year ago

have posted the renedered html,please check.

Dipesh Parmar Over a year ago

@ShivayanMukherjee okay jQuery.validate plugin get elements as per tag name so you need to replace rules and message selector to tag name like userRegistration.userName instead of UName

Shivayan Mukherjee Over a year ago

well i tried putting in userRegistration.userName but error was thrown right away. What i see is,the <form:input path=""> tag renders as <input id="UName" class="error" type="text" autocomplete="on" value="" name="userRegistration.userName"> if u mention an id expliciltly. Here id is not important because Jquery takes the attribute 'name' into consideration. So here i find Jquery is unable to recognise the 'dot(.)' in name="userRegistration.userName". Though i am not sure but i feel this is what is actually happening because in my other application where the name is straight its working

Shivayan Mukherjee Over a year ago

alright. So is there a way to fix this because i can't alter the name as the element is being accessed from its parent bean.

Collectives™ on Stack Overflow

SpringForm with Jquery Validation not working

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related