javascript - AJAX 验证，ajax 不执行但它发送 get 到 index.php

Question

所以我在研究如何在 AJAX 执行之前进行验证。在添加 if ($("#ModalsForm").validate()){} 之前，我的 AJAX 运行良好。添加该验证后，它将验证并返回 true 并将 Get 发送到我的 index.php。

index.php?bookingid=10040917035610&roomid=10&...

我的 HTML

<form id="ModalsForm" method="post" data-parsley-excluded="[disabled=disabled]">
     <div id="myModal" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
         <div class="modal-dialog modal-lg">
            <div class="modal-content" id="modalcontent">
            <!-- AJAX onclick content modal -->
            </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div>
 </form>

我的 AJAX

function ConfirmSubmit() {
  var x = confirm("Are you sure you want to save or update?");
  if (x) {
    if ($("#ModalsForm").validate()) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function(result) {
          alert(result);
          //$("#information").html(result);
          $('#myModal').modal('toggle');
        }
      });
      return false;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

我在验证表单时是否遗漏了什么？

<script>
$('#ModalsForm').validate({
  submitHandler: function() {
    if (confirm("Are you sure you want to save or update?")) {
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {
          alert(result);
          $('#myModal').modal('toggle'); 
        }
      });
      return false;
    }
  }
});
</script>

来自 Rory McCrossan 的最新消息，在控制台中发现错误

Answer 1

如果您正在使用 jQuery 验证并希望通过 AJAX 提交表单，您应该反转逻辑，以便在表单提交时使用插件的 submitHandler 选项来实现您自己的逻辑有效，像这样:

$('#ModalsForm').validate({
  rules: { /* your rules. .*/ },
  messages: { /* your messages... */ },
  submitHandler: function() {
    if (confirm("Are you sure you want to save or update?")) {
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {
          $('#myModal').modal('toggle'); 
        }
      });
    }
    return false;
  }
});

然后您可以删除 ConfirmSubmit() 函数，并正常提交 form 元素。