<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

        <script type="text/javascript">
            $( function() {
            $( ".datepicker" ).datepicker();
          } );
       </script>    

<!--        <script>
        function submitLeave(empid){

            console.log("hi iam in submit leave method");
            /* alert("herreeee");
            var x = document.getElementById("startDate").value;
            var y = document.getElementById("endDate").value;
            console.log("x= "+x);           
            alert("x=="+x);         
            var employeeId = empid;
            console.log("empid "+employeeId);
            alert("empid=="+employeeId);     */             
            $.ajax({
                type : 'POST',
                url : 'testLeave',
                data: {'startDate': document.getElementById("startDate").value,        
                    'endDate': document.getElementById("endDate").value,
                    'empid':empid,
                    'leaveType': document.getElementById("leaveType").value,
                    'reason': document.getElementById("reason").value,
                    'casualLeave': ${employee.casualLeave},
                   },                
                success: function(response){
                     alert(response);
                 },   

                 error: function(){
                     alert("error");
                 }
                });         
        }
    </script> -->
<script>
        $('#leaveApply').validate({

            submitHandler: function(){
                $.ajax({
                    type : 'POST',
                    url : 'testLeave',
                    data: {'startDate': document.getElementById("startDate").value,        
                        'endDate': document.getElementById("endDate").value,
                        'empid':empid,
                        'leaveType': document.getElementById("leaveType").value,
                        'reason': document.getElementById("reason").value,                      
                       },                
                  success: function(response){
                     alert(response);
                 },
                 error: function(){
                     alert("error");
                 }
                });
            }
        });                         
    </script>

</head>
    <body style="background-color:powderblue" >
    Welcome ${pageContext.request.userPrincipal.name} 
    Hi ${employee.name}, your employee id is ${employee.empid} <br><br><br><br>
    <i>inside testwelcome.jsp file</i>
    <br><br>

<h1>Apply your leave here</h1>

   <form:form method="POST" action="/testLeave" name="leaveApply">   
   <label for="datepicker"> start date</label>
   <input type="text" name="startDate" placeholder="start date" class="datepicker" id="startDate"/> <br>
   <label for="datepicker">end date</label>
   <input type="text" name="endDate" placeholder="end date" class="datepicker" id="endDate"/> <br>
   <label > Reason</label>
   <input type="text" name="reason" placeholder="Reason"  id="reason" /> <br>
  Type of leave
  <select name="leaveType" id="leaveType">
  <option value="casual">Casual</option>
  <option value="sick">Sick</option>
</select> 
   <input type="button" value="submit"  />
   </form:form>
   <%-- onclick="submitLeave('${employee.empid}')" --%>
<br><br>   
<form method="POST" action="/logout">
<input type="submit" value="logout">
<%-- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> --%>
</form>
</body>
</html>

I have the pasted the above html I'm trying to validate the form before making the ajax call to my spring controller ... but the ajax call does not work..

when I try the commented part function submitLeave(empid) the ajax call goes but I want to validate the form so when I add the jQuery validate method the ajax call does not goes to the server..

basically I want to validate the form before ajax call can someone tell me how should i do this?

2 Answers

0
Joey Phillips On
  • jquery-validate is a good validation plugins to jquery. You can try it.
  • To locate the bugger, you can add echo or var_dump in your php code to check if the backend has received the right params. Then try to check the request jquery send by development tool (you can press F12 in chrome)
0
AmirBll On

You used #leaveApply before validate function,

Set id attribute for your form and try it again like:

<form:form method="POST" action="/testLeave" name="leaveApply" id="leaveApply">   
       <label for="datepicker"> start date</label>
       <input type="text" name="startDate" placeholder="start date" class="datepicker" id="startDate"/> <br>
       <label for="datepicker">end date</label>
       <input type="text" name="endDate" placeholder="end date" class="datepicker" id="endDate"/> <br>
       <label > Reason</label>
       <input type="text" name="reason" placeholder="Reason"  id="reason" /> <br>
      Type of leave
       <select name="leaveType" id="leaveType">
       <option value="casual">Casual</option>
       <option value="sick">Sick</option>
      </select> 
       <input type="button" value="submit"  />
</form:form>