Search code examples
jqueryjspjquery-validatespring-form

validation is not working on spring submit request

I am new to jquery and I am trying spring validation, but I am not able to see any validation on submitting the request. Please help me to understand this issue.

<form:form id="signupForm" modelAttribute="login" action="/loginUser" method="post" class="form-signin" >
   <table align="center">
      <tr> <td>
         <form:input path="username" name="username" id="username" placeholder="Username" class="form-control"/>
       </td></tr>
       <tr><td>
        <form:password path="password" name="password" id="password" placeholder="password" class="form-control" />
        </td></tr>
        <tr><td>
         <form:button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</form:button>
         </td></tr>
    </table>
</form:form>

I added script file in head section of jsp:

<script type="text/javascript">
 $(document).ready(function() {
     $("#signupForm").validate({
         rules: {
            username: {
               required: true,
               minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            }
          },
          messages: {
              username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
              },
              password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
             }
       }
  });
</script>

Also imported this into my jsp file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
Solution

  • I can execute your code without spring type input. You've missed }); at the end of your script. Please have a look at the corrected HTML code,

    <form id="signupForm" action="/loginUser" method="post" class="form-signin" >
<table align="center">
  <tr> <td>
     <input name="username" id="username" placeholder="Username" class="form-control"/>
   </td></tr>
   <tr><td>
    <input type="password" name="password" id="password" placeholder="password" class="form-control" />
    </td></tr>
    <tr><td>
     <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button>
     </td></tr>
</table>
</form>

    Script,

    $(document).ready(function() {
 $("#signupForm").validate({
     rules: {
        username: {
           required: true,
           minlength: 2
        },
        password: {
            required: true,
            minlength: 5
        }
      },
      messages: {
          username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
          },
          password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
          }
       }
   })
});

    Validation Image

    Please find the Working Demo of this code. Let me know if this helps.

    Cheers..!