未验证时使用 Ajax 调用触发表单验证

Question

我有一个带有 Ajax 调用的简单表单，但即使表单未经过验证，也会执行 ajax 调用。

在下面的代码行中，console.log("This line should execute only if Form is validated"); 在表单未验证时被执行。

Bootstrap 5 验证Codepen code

    (function () {
      "use strict";
      const forms = document.querySelectorAll(".requires-validation");
      Array.from(forms).forEach(function (form) {
        form.addEventListener(
          "submit",
          function (event) {
            if (!form.checkValidity()) {
              event.preventDefault();
              event.stopPropagation();
            }
 else
            {
            console.log("This line should execute only if Form is validated");
            // Call Ajax Function
            // AjaxCallSaveData();
}
            form.classList.add("was-validated");
          },
          false
        );
      });
    })();
    
    //$(document).ready(function () {
    function AjaxCallSaveData() 
    {
      $("form").submit(function (event) {
        var formData = {
          name: $("#name").val(),
          email: $("#email").val(),
          message: $("#message").val(),
          superheroAlias: $("#superheroAlias").val()
        };
    
        $.ajax({
          type: "POST",
          url: "SubmitFORM.php",
          data: formData,
          dataType: "json",
          encode: true
        }).done(function (data) {
          console.log(data);
        });
    
        event.preventDefault();
      });
    }
    //});

不确定我做得对吗？

HTML

<div class="form-body">
  <div class="row">
    <div class="form-holder">
      <div class="form-content">
        <div class="form-items">
          <h3>Register you interest</h3>
          <p>Fill in the data below, we will get back to you!</p>
          <form class="requires-validation" action="SubmitFORM.php" method="POST" novalidate>

            <div class="col-md-12 mb-3">
              <input class="form-control" type="text" name="name" id="name" placeholder="Full Name" required>
              <div class="valid-feedback">Username field is valid!</div>
              <div class="invalid-feedback">Username field cannot be blank!</div>
            </div>

            <div class="col-md-12 mb-3">
              <input class="form-control" type="email" name="email" id="email" placeholder="E-mail Address" required>
              <div class="valid-feedback">Email field is valid!</div>
              <div class="invalid-feedback">Email field cannot be blank!</div>
            </div>


            <div class="col-md-12 mb-3">
              <textarea name="message" id="message" placeholder="Your Message"></textarea>
            </div>


            <div class="form-button mt-3">
              <button id="submit" type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

event.preventDefault() 只会阻止表单提交。它无法阻止 JavaScript 函数的下一行执行。

您应该使用return 代替event.preventDefault()。