使用jquery驗證器對不在表單標簽中的按鈕進行驗證后提交表單

Question

從那以后，我一直在與這段代碼的錯誤做斗爭。 碰巧表單沒有在此按鈕上提交。 該按鈕屬於按鈕類型，不在表單標簽中。

$("#step1Btn").click(function () {

  var userForm = $("form[name='step1Form']");

  if (userForm.valid()) {
    userForm.submit(function () {
      console.log('submitted o!')
      $("#spin1").show();
      $("form[name='step1Form'] > span").remove();
      $('input[name="emailInput"]').prop('name', "id")
      $('input[name="fullNameInput"]').prop('name', "full-name")
      $('input[name="phoneInput"]').prop('name', "phone-number")

      $.ajax({
        type: 'POST',
        url: "api/v1/user?" + $(this).serialize(),
        success: (result) => {
          localStorage.setItem('user', JSON.stringify(result))
          localStorage.setItem('authToken', result.authToken);
          $("form[name='step1Form'] > span").remove()
          $('#step1, #step2').toggle();
          $('#step1Title, #step2Title').toggle();

        },
        error: function (request, exception, errorThrown) {
          $("form[name='step1Form'] > span").remove();
          $("form[name='step1Form']").prepend('<span class=\'error\'><p>' + request.responseJSON.message + '</p></span>')
        },
      })
    });
  } else {
    return false;
  }
});

以下是完整表格

<div id="step1" class="col-12 col-md-6">
    <form name="step1Form">
        <div class="home-icon d-flex justify-content-center align-items-center flex-column">
            <img src="images/new-icons/user.png" alt="User Registration logo" height="80" />
            <p class="my-3">User Registration</p>
        </div>
        <div class="form-group">
            <label for="fullNameInput">Contact full name</label>
            <input name="fullNameInput" class="form-control custom-input" placeholder="First name    Last name" id="fullNameInput">
        </div>
        <div class="form-group">
            <label for="emailInput">Contact email address</label>
            <input name="emailInput" type="email" placeholder="example@email.com" class="form-control custom-input" id="emailInput">
        </div>
        <div class="form-group">
            <label for="confirmEmailInput">Confirm contact email address</label>
            <input name="confirmEmailInput" type="email" placeholder="example@email.com" class="form-control custom-input"
                id="confirmEmailInput">
        </div>
        <div class="form-group">
            <label for="phone">Contact phone number</label>
            <input name="phoneInput" placeholder="08012345678" class="form-control custom-input" id="phone">
        </div>

    </form>
    <button type="button" class="btn red-btn user-btn custom-btn" id="step1Btn">Next<i id="spin1" class="fa fa-spinner fa-spin"></i></button>
</div>

所以我想看看我哪里出錯了。 每當我在if（userForm.valid）和userForm.submit（）之間放置console.log時，我都可以登錄並查看輸出。

但是，一旦我將其放置在userform.submit（）中，我就不會獲得任何價值。 就像，表格完全沒有提交。 我不知道是否是因為我如何撥打Ajax。.請幫助

Answer 1

您正在將Ajax放入submit ...。

$("#step1Btn").click(function () {

  ....

  if (userForm.valid()) {

    userForm.submit(function () {

      ....

      $.ajax({ ....

由於Ajax替換了實際的提交，因此這沒有任何意義。 這樣，您可以有效地再次通過驗證發送它； 我看不到.validate()方法，但是懷疑您只是在使用默認選項，這將是另一個常規submit ……您可能陷入了無處循環的循環。

您的Ajax的最佳位置是submitHandler .validate()方法的submitHandler內 。

如果您的按鈕不在表單中，則捕獲click並手動觸發提交，然后讓驗證插件接管其余部分。

$("#step1Btn").click(function () { // click of external button
    $("form[name='step1Form']").submit();  // trigger validation & submission
});

$("form[name='step1Form']").validate({  // initialize plugin
    submitHandler: function(form) { // fires when valid
        //  YOUR AJAX GOES INSIDE HERE
        return false;
    },
    // other options, rules, etc.
});

閱讀submitHandler的文檔 。