java web表单提交之前调用ajax校验

表单，通过  onsubmit  标签属性调用方法，记得一定要return

 

<form id="myForm" th:action="@{/user/order}" method="post" onsubmit="return checkF(this)">
                    <input type="hidden" id="labId" name="labId" th:if="${lab!=null}" th:value="${lab.labId}">
                    <div class="form-group">
                      <label>实验室地址：</label>
                      <p name="address" th:text="${lab!=null}?${lab.address}"></p>
                    </div>
                    <div class="form-group">
                      <label>预约日期：</label>
                      <input id="newDay" name="useDay" required type="date" class="form-control" >
                    </div>
                    <div class="form-group">
                      <label>预约时间：</label>
                      <select class="form-control" id="timeId" name="timeId">
                        <option th:value="${time.timeId}"  th:each="time:${times}" th:text="${#dates.format(time.startTime,'HH:mm')}+'-'+${#dates.format(time.endTime,'HH:mm')}">1</option>
                      </select>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                  </form>

 

js校验

function checkF(myForm){

        var labId = $("#labId").val();
        var timeId = $("#timeId").val();
        var newDay = $("#newDay").val();

        $.ajax({
          type : "post",
          url:"http://localhost:8080/user/order/check",
          data : "labId=" + labId + "&day="+newDay + "&timeId="+timeId,
          cache : false,
          async: false,//一定要设置为同步，不然没法校验到
          dataType : "json",
          success:function(data){
            if (data.res == 0){
              alert(data.msg+";"+data.res);
              return false;
            } else {
          
              return true;
            }
          }
        });

      }

 

ajax请求这里，我踩了个坑 = =

因为不知道ajax默认是异步请求，所以每次有返回结果表单却都可以正常提交

所以这边一定要设置  async: false