How to validate the form using jQuery and Ajax

Question

<%@ 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?

use the remote: validation method that's built into jquery-validate instead of trying to do it yourself. — Barmar
– Barmar, Commented May 2, 2019 at 7:49
i want to add my own validation logic..example i want to make sure startdate comes before endDate, reason is blank...can u give me some where i can read about remote: validation..iam new to ajax and jquery hence facing problems — tin_tin
– tin_tin, Commented May 2, 2019 at 7:51
You can do that validation separately from the AJAX validation. — Barmar
– Barmar, Commented May 2, 2019 at 7:53
The documentation is here. There are examples in this SO question — Barmar
– Barmar, Commented May 2, 2019 at 7:55

Sparky · Accepted Answer · 2019-05-02 18:18:27Z

0

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)

edited May 2, 2019 at 18:18

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered May 2, 2019 at 12:56

Joey Phillips

1,6712 gold badges16 silver badges22 bronze badges

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

Comments

Abolfazl Mohajeri · Accepted Answer · 2019-05-12 10:20:17Z

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>

Collectives™ on Stack Overflow

How to validate the form using jQuery and Ajax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related