我有一个使用Jquery和Ajax将数据发送到服务器端的表单，但是即使我在函数中应用了preventDefault()和stopImmediatePropagation，数据也提交了两次。
这是我的表格
<form id="commentForm" method="post" enctype="multipart/form-data" class="registerForm">
<div id="rootwizard">
<ul class="nav nav-pills">
<li class="nav-item m-t-15 bv-tab-error">
<a class="nav-link active" href="#tab1" data-toggle="tab" aria-expanded="true">
<span class="userprofile_tab1">1</span></a>
</li>
<li class="nav-item m-t-15">
<a class="nav-link" href="#tab2" data-toggle="tab">
<span class="userprofile_tab2">2</span></a>
</li>
<li class="nav-item m-t-15">
<a class="nav-link" href="#tab3" data-toggle="tab"><span>3</span>Finish</a>
</li>
</ul>
<div class="tab-content m-t-20">
<div class="tab-pane active" id="tab1" aria-expanded="true">
<div class="form-group has-error">
<label for="userName" class="col-form-label">Full Name *</label>
<input id="userName" name="name" type="text" placeholder="Enter your name" class="form-control required" data-bv-field="name">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="name" data-bv-result="INVALID" style="">The Name is required</small></div>
<div class="form-group ">
<label for="email" class="col-form-label">Email
(optional)</label>
<input id="email" name="email" placeholder="Enter your Email" type="text" class="form-control email" data-bv-field="email">
</div>
<div class="form-group">
<label>Phone number *</label>
<input type="text" class="form-control" id="phone1" name="phone1" placeholder="0756000000" data-bv-field="phone1">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="phone1" data-bv-result="NOT_VALIDATED" style="display: none;">The phone number is required</small><small class="help-block" data-bv-validator="regexp" data-bv-for="phone1" data-bv-result="NOT_VALIDATED" style="display: none;">Enter valid phone number</small>
</div>
<div class="form-group">
<label>Other number (optional)</label>
<input type="text" class="form-control" id="phone2" name="phone2" placeholder="0789000000" data-bv-field="phone2">
</div>
<div class="form-group has-error">
<label for="password" class="col-form-label">Password
*</label>
<input id="password" name="password" type="password" placeholder="Enter your password" class="form-control required" data-bv-field="password">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="password" data-bv-result="INVALID" style="">The password is required</small>
</div>
<ul class="pager wizard pager_a_cursor_pointer">
<li class="previous disabled">
<a><i class="fa fa-long-arrow-left"></i>
Previous</a>
</li>
<li class="next">
<a>Next <i class="fa fa-long-arrow-right"></i>
</a>
</li>
<li class="next finish hidden" style="display: none;">
<a>Finish</a>
</li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<div class="form-group">
<label for="address">Address *</label>
<input id="address" name="address" type="text" class="form-control" data-bv-field="address">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="address" data-bv-result="NOT_VALIDATED" style="display: none;">The address is required </small>
</div>
<div class="form-group">
<label for="gender">Package</label>
<select class="custom-select form-control" id="package" name="package" title="Select an package ..">
<option>Select</option>
<option value="Individual & Family">Individual & Family</option>
<option value="Corporates">Corporates</option>
<option value="Religious">Religious</option>
</select>
</div>
<div class="form-group">
<div class="col-12 col-lg-6 text-center text-lg-left">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new img-thumbnail text-center">
<img src="img/h.png" data-src="img/h.png" alt="not found">
</div>
<div class="fileinput-preview fileinput-exists img-thumbnail">
</div>
<div class="m-t-20 text-center">
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" id="photo" name="photo">
</span>
<a href="#" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
</div>
<ul class="pager wizard pager_a_cursor_pointer">
<li class="previous disabled">
<a><i class="fa fa-long-arrow-left"></i>
Previous</a>
</li>
<li class="next">
<a>Next <i class="fa fa-long-arrow-right"></i>
</a>
</li>
<li class="next finish hidden" style="display: none;">
<a>Finish</a>
</li>
</ul>
</div>
<div class="tab-pane" id="tab3">
<h5>Referee details</h5>
<hr>
<div class="form-group has-error">
<label for="referee_name" class="col-form-label">Referee Name *</label>
<input id="referee_name" name="referee_name" type="text" placeholder="Enter your name" class="form-control required" data-bv-field="referee_name">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="referee_name" data-bv-result="INVALID" style="">The Referee Name is required</small>
</div>
<div class="form-group ">
<label for="referee_email" class="col-form-label">Referee Email
(optional)</label>
<input id="referee_email" name="referee_email" placeholder="Enter your Email" type="text" class="form-control email" data-bv-field="referee_email">
</div>
<div class="form-group">
<label>Referee Phone number *</label>
<input type="text" class="form-control" id="rphone" name="rphone" placeholder="0756000000" data-bv-field="rphone">
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="rphone" data-bv-result="NOT_VALIDATED" style="display: none;">The referee phone number is required</small><small class="help-block" data-bv-validator="regexp" data-bv-for="rphone" data-bv-result="NOT_VALIDATED" style="display: none;">Enter valid referee phone number</small>
</div>
<div class="form-group">
<span>Terms and Conditions *</span>
<br>
<label class="custom-control custom-checkbox wizard_label_block">
<input type="checkbox" id="acceptTerms" name="acceptTerms" class="custom-control-input" data-bv-field="acceptTerms">
<span class="custom-control-indicator"></span>
<span class="custom-control-description custom_control_description_color">I agree with the Terms and Conditions.</span>
</label>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="acceptTerms" data-bv-result="NOT_VALIDATED" style="display: none;">The checkbox must be checked</small></div>
<ul class="pager wizard pager_a_cursor_pointer">
<li class="previous disabled">
<a><i class="fa fa-long-arrow-left"></i>
Previous</a>
</li>
<li class="next">
<a>Next <i class="fa fa-long-arrow-right"></i>
</a>
</li>
<li >
<input type="submit" class="btn btn-success pull-right" value="Submit">
</li>
</ul>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<button type="reset" style="width: 100%" class="btn btn-danger">Reset</button>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<label class="col-form-label">Already have an account?</label> <a href="/" class="text-primary login_hover"><b>Log In</b></a>
</div>
</div>
</form>
这是我的jQuery：
$(document).ready(function() {
$("#commentForm").submit(function(e) {
e.stopImmediatePropagation();
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}),
$.ajax({
url: '/create_member',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
beforeSend: function() {
$("#register").text("Processing....")
},
success: function(data) {
if (data.message) {
swal({
title: "Success",
text: "" + data.message,
icon: "success",
});
} else if (data.error) {
swal({
title: "Sorry",
text: "" + data.error,
icon: "error",
});
}
$("#commentForm")[0].reset();
$("#register").text("Register")
}
});
return false;
})
})
答案 0 :(得分：2)
我看到您有很多验证属性，所以您可能正在使用JQuery validate插件，submit已在其中实现，因此您不能添加其他类似的东西。
这是官方文件：https://jqueryvalidation.org/validate/
您可以尝试以下解决方案： Why do you have to submit twice before jQuery Validate submitHandler is triggered?
或这个： Jquery Validate Plugin Prevent Double Submit On Validation