Ajax提交处理程序不起作用，但验证工作

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;
});

但是，即使我有一个提交处理程序和提交处理程序中的返回 false，页面仍然会刷新，甚至 i 在我的开发工具中向我的提交处理程序添加断点，断点永远不会到达。为什么？我在这里做错了什么？

我尝试将提交处理程序更改为更通用的内容，例如：

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

但我的页面仍然会引用。为什么？

Answer 1

在处理程序中包含事件function(e)并防止其默认值。

$('.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
});