jQuery AJAX表单的问题

Question

I'm adapting a page to a client's needs from a template. There are two contact forms in the page, getting validated and posted to a PHP file through AJAX. One is out of the box, the other I've extended to include more fields, and am unsuccessfully trying to get the associated jQuery function to work.

The function is disabling the native functionality of HTML's "post," but does not actually result in an AJAX request (looking at the console).

I don't want to rewrite this whole mess of a function. If I'd written this thing I would have just overriden the functionality.

$(document).ready(function() {
  $("#subscribe").submit(function() {
    $("#subscribe .error").remove();
    var s = !1;
    if ($(".requiredField").each(function() {
      if ("" == jQuery.trim($(this).val())) {
        {
          $(this).prev("label").text()
        }
        $(this).parent().append('<span class="error">This field is required</span>'), $(this).addClass("inputError"), s = !0
      } else if ($(this).hasClass("email")) {
        var r = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if (!r.test(jQuery.trim($(this).val()))) {
          {
            $(this).prev("label").text()
          }
          $(this).parent().append('<span class="error">Invalid email address</span>'), $(this).addClass("inputError"), s = !0
        }
      }
    }), !s) {
      $("#subscribe input.submit").fadeOut("normal", function() {
        $(this).parent().append("")
      });
      var r = $(this).serialize();
      $.post($(this).attr("action"), r, function() {
        $("#subscribe").slideUp("fast", function() {
          $(this).before('<div class="success">Your email was sent successfully.</div>')
        })
      })
    }
    return !1
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="contact.php" id="subscribe" method="post" name="send">
  <span class="input input--kuro">
    <input class="subscriberequiredField  input__field input__field--kuro" id="name" name="name" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Name</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField  input__field input__field--kuro" id="company" name="company" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Company</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField subscribeemail input__field input__field--kuro" id="email" name="email" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">Email</span>
    </label>
  </span>
  <span class="input input--kuro">
    <input class="subscriberequiredField input__field input__field--kuro" id="idea" name="idea" type="text">
    <label class="input__label input__label--kuro" for="subscribeemail">
      <span class="mail input__label-content input__label-content--kuro">The game-changing idea</span>
    </label>
  </span>
  <span>
    <button class="submit-button" id="submit" type="submit">Subscribe</button>
  </span>
</form>

</div>

Answer 1

You should change this :

$("#subscribe").submit(function() {

into this:

$("#subscribe").on('click', (function() {