阿賈克斯提交處理程序不工作，驗證雖然

Question

其工作一個簡單的形式，看起來像如下：

<form class="form register-form" data-parsley-validate data-parsley-excluded="input[type=button],input[type=submit], input[type=reset]" method="POST"> 
 
      <div class="notification hide"></div> 
 
      <div class="row first-rg"> 
 
      <div class="col-sm-6"> 
 
       <input type="text" class="tfield-2" name="contact_fname" id="contact_fname" placeholder="First Name*" required data-parsley-trigger="focusout"> 
 
       <div style="display:none;"><input type="text" class="tfield-2" name="contact_projectname" id="contact_projectname" value="Royal Pearls"></div> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <input type="text" class="tfield-2" name="contact_lname" id="contact_lname" placeholder="Last Name*" required data-parsley-trigger="focusout"> 
 
      </div> 
 
      </div> 
 
      <div class="row second-rg"> 
 
      <div class="col-sm-6"> 
 
          <input type="text" id="contact_phone" placeholder="Phone No. *" name="contact_phone" maxlength="50" required="" class="international-number-input international-phone-number-input intl-phone-number-input" aria-required="true" autocomplete="off" data-parsley-intl-tel-no data-parsley-trigger="focusout" required> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <input type="email" class="tfield-2" name="contact_email" id="contact_email" placeholder="Email*" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-error-message="Enter Valid Email" required> 
 
      </div> 
 
      </div> 
 
      <p class="form-tag">Are you searching for a</p> 
 
      <div class="checkbox regiterpage"> 
 
      <label class="background-co"> 
 
      <input 
 
       type="checkbox" 
 
       value="1" 
 
       name="bedroom[]" 
 
       required 
 
       type="checkbox" 
 
       data-parsley-mincheck="1" 
 
       data-parsley-error-message="Check atleast 1" 
 
      > 
 
      <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 1 Bedroom </label> 
 
      <label class="background-co" > 
 
      <input type="checkbox" value="2" name="bedroom[]"> 
 
      <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 2 Bedrooms </label> 
 
      <label class="background-co"> 
 
      <input type="checkbox" value="3" name="bedroom[]"> 
 
      <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 3 Bedrooms </label> 
 
      <label class="background-co"> 
 
      <input type="checkbox" value="4" name="bedroom[]"> 
 
      <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 4 Bedrooms </label> 
 
      </div> 
 
      <div class="radioin"> 
 
      <p class="form-tag">Are you searching for a property as an</p> 
 
      <label class="radio-inline background-co"> 
 
      <input type="radio" 
 
      name="propertytype" 
 
      required 
 
      data-parsley-mincheck="1" 
 
      data-parsley-error-message="Check atleast 1" 
 
      > 
 
      <span class="rlabl">End-user/Owner-occupier</span> </label> 
 
      <label class="radio-inline background-co"> 
 
      <input type="radio" name="optradio"> 
 
      <span class="rlabl">Investor</span> </label> 
 
      </div> 
 

 
      <!-- HIDDEN INPUTS FOR google captcha --> 
 
      <input type="hidden" value="No Bots" id="google-captcha" required> 
 
      <input type="hidden" id="google-captcha-check" data-parsley-equalto="#google-captcha" data-parsley-error-message="Fill the captcha!" required> 
 
      <!-- HIDDEN INPUTS FOR google captcha --> 
 

 
      <div class="captch"> 
 
      <div class="g-recaptcha" data-sitekey="6LdksigUAAAAAKw5idd69Xa3ysK_RZJ3xAleTbVj" data-callback="google_captcha_callback" data-expired-callback="google_captcha_callback"></div> 
 
      </div> 
 
      <button type="submit" class="btn-default">Submit</button> 
 
     </form>

現在我已經驗證使用parsely.js形式，驗證工作得很好，但與我提交處理的一個問題，我有以下我的表單提交處理程序：

$('.register-form').submit(function() { 
 
     $.ajax({ 
 
      type: 'POST', 
 
      url: 'mail/reg_send.php', 
 
      data : $('.register-form').serialize(), 
 
      success : (data , status) => { 
 
       (data === 'success') ? $('.notification').text('Thank you for contacting us.').removeClass('hide') : $('.notification').text('There was a problem submitting your form').removeClass('hide'); 
 
       $('.register-form')[0].reset(); 
 
      } 
 
     }); 
 
     return false; 
 
    });

但是，即使我有一個提交處理程序，並返回在提交處理程序錯誤，頁面仍然刷新，甚至我在開發工具斷點添加到我的提交處理程序，斷點從未達到。爲什麼？我在這裏做錯了什麼？

我試圖改變提交處理的東西更通用的如：

$('form').submit((){ 
    // code here 
}) 

但我的網頁將仍然refreah。爲什麼？

Answer 1

將事件包含在處理程序中，其中包含function(e)和prevent default。

$('.register-form').submit(function(e) { 
    e.preventDefault(); 
    // the rest of your code 
}); 

你的其他問題可能是你的事件處理程序沒有被連接到元素，因爲在執行JavaScript的時候不可用。您可以使用以下代碼輕鬆測試：

$(document).on("submit", ".register-form", function(e) { 
    e.preventDefault(); 
    // the rest of your code 
});