試圖提交表單使用jQuery提交形式驗證與submitHandler

Question

嗨我玩弄jQuery表單驗證器，表單驗證完全正常，問題是當我點擊提交，頁面刷新不是我想要的目標。表單確實發佈了數據進入我的數據庫的數據，這是一件好事。

我的JavaScript文件

$().ready(function() { 


$('#registerForm').validate({ 

    rules: { 
     firstname: { 
      required: true, 
      nowhitespace: true, 
      lettersonly: true, 
     }, 
     surname: "required", 
     password: { 
      required: true, 
      minlength: 5, 
      maxlength: 10 
     }, 
     confirm_password: { 
      required: true, 
      minlength: 5, 
      equalTo: "#password1", 
     }, 
     email: { 
      nowhitespace: true, 
     } 

    }, 

    messages: { 
     firstname: { 
      required: 'Please enter a name', 
     }, 
     surname: { 
      required: 'Please enter a surname', 
     }, 
     email: { 
      required: 'Please enter an email address', 
      email: 'Please enter a <em>valid</em> email' 
     }, 
     password: { 
      required: 'Please provide a password', 

     }, 
     confirm_password: { 
      required: 'Please confirm your password', 

     } 

    }, 

    errorElement: 'ul', 
    errorPlacement: function (error, element) { 
     let placement = $(element).data('error'); 
     if (placement) { 
      $(placement).append(error) 
     } else { 
      error.insertAfter(element); 
     } 
    }, 

    submitHandler: function() { 

     postContent(); 
    }, 

}); 

function postContent() { 

    $('#registerForm').on('submit',function() { 

     let that = $(this), 
      url = that.attr('action'), 
      type = that.attr('method'), 
      data = {}; 
     that.find('[name]').each(function (index, value) { 
      let that = $(this), 
       name = that.attr('name'), 
       value = that.val(); 

      data['name'] = value; 
     }); 

     $.ajax({ 
      url: url, 
      type: type, 
      data: data, 
      success: function (response) { 
       console.log(response); 
      } 

     }); 

     return false; 
    }); 
} 

和HTML表單本身

<div id="registerModal" class="modal"> 
<div class="modal-content"> 

    <h4 class="center container">Register</h4> 
    <div class="center" id="error-list"> 
     <ul id="required"></ul> 
     <ul id="password"></ul> 
     <ul id="passwordShort"></ul> 
    </div> 
    <div class="row center"> 
     <form class="col s12" action="account.php" method="post" id="registerForm" novalidate="novalidate"> 
      <div class="row"> 
       <div class="input-field col s12 l6"> 
        <input id="first_name" type="text" class="validate" name="firstname" required> 
        <label for="first_name">First Name *</label> 
       </div> 
       <div class="input-field col s12 l6"> 
        <input id="last_name" type="text" class="validate" name="surname" required> 
        <label for="last_name">Last Name *</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <input id="email" type="email" class="validate" name="email" required/> 
        <label for="email">Email *</label> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="input-field col s12"> 
        <input id="password1" type="password" class="validate" name="password" required/> 
        <label for="password">Password *</label> 
        <ul id="passError"></ul> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <input id="confirm_password" type="password" class="validate" name="confirm_password" required/> 
        <label for="email">Confirm Password *</label> 
       </div> 
      </div> 
      <button class="btn waves-effect waves-light" id="register" name="register" type="submit">Register 
       <i class="material-icons right">send</i> 
      </button> 
      <span> </span> 
     </form> 
    </div> 

</div> 
<div class="modal-footer"> 
</div> 

Answer 1

要停止形式的默認行爲從刷新你的頁面，你需要添加下面的提交。

$('#registerForm').on('submit',function (e) { 
    e.preventDefault(); 
... 

另一種方法是使用「return false;」這可以防止發生默認事件，並且還可以阻止事件傳播。

$('#registerForm').on('submit',function (e) { 
    return false; 
...