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>

我已经粘贴了上面的html，我试图在对spring控制器进行ajax调用之前验证表单...但是ajax调用不起作用。

当我尝试使用带注释的零件函数submitLeave（empid）时，ajax调用就开始了，但是我想验证表单，因此当我添加jQuery validate方法时，ajax调用不会进入服务器。.

基本上我想在ajax调用之前验证表单，有人可以告诉我该怎么做？

Answer 1

jquery-validate是jquery的一个很好的验证插件。您可以尝试。
要查找bugger，可以在php代码中添加echo或var_dump，以检查后端是否收到了正确的参数。然后尝试检查开发工具发送的请求jQuery（您可以在chrome中按F12键）

Answer 2

您在验证功能之前使用了#leaveApply

为表单设置 id 属性，然后像下面这样再次尝试：

<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>

如何使用jQuery和Ajax验证表单

2 个答案: