本文旨在解决在使用 jQuery AJAX 提交表单时，HTML5 required 属性失效的问题。通常，这是由于表单提交事件处理方式不正确导致的。本文将详细介绍如何正确地使用 required 属性并结合 jQuery AJAX 实现表单验证和提交，确保在数据发送到服务器之前，客户端能够进行有效的验证。
问题分析
当表单使用 AJAX 提交时，如果提交按钮的 type 属性设置为 button，浏览器将不会触发默认的表单提交行为，也就不会执行 HTML5 的内置验证。因此，即使表单元素设置了 required 属性，浏览器也不会阻止表单的提交。
解决方案
解决此问题的关键在于正确地触发表单的提交事件，并利用 jQuery 监听该事件。
1. 修改按钮类型
首先，将提交按钮的 type 属性修改为 submit。这将确保在点击按钮时，浏览器会尝试提交表单。
<button type="submit" id="addNewStaffBtn" class="btn btn-primary" name="addNewstafftBtn">Submit</button>
2. 监听表单的 submit 事件
使用 jQuery 监听表单的 submit 事件，而不是按钮的 click 事件。这样，在表单提交时，无论是否通过 AJAX，都会触发验证。
$("#addNewStaffBtnForm").on('submit', function(e) {
e.preventDefault(); // 阻止默认的表单提交行为
// 你的 AJAX 请求代码...
$.ajax({
type: "POST",
url: "datasender2.php",
data: $('form.newStaffAdder').serialize(),
success: function(message) {
alert(message);
if (jQuery.trim(message) == "ok") {
Swal.fire(
'Good job!',
'New Member Has has been added Successfully!',
'success'
);
document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
$('#addNewStaffOff').click();
$('#addNewStaffBtnForm').trigger("reset");
} else if (jQuery.trim(message) == "nok") {
Swal.fire(
'Ops',
'Something went wrong, Contact Admin!',
'error'
);
document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
$('#addNewStaffOff').click();
$('#addNewStaffBtnForm').trigger("reset");
}
}
});
});代码解释:
- $("#addNewStaffBtnForm").on('submit', function(e) { ... });：这行代码使用 jQuery 监听 ID 为 addNewStaffBtnForm 的表单的 submit 事件。
- e.preventDefault();：这行代码阻止了表单的默认提交行为。因为我们希望使用 AJAX 来提交表单，而不是让浏览器执行默认的提交。
- $.ajax({...});： 这部分是你的 AJAX 请求代码，负责将表单数据发送到服务器。
3. 完整示例
以下是完整的 HTML 和 JavaScript 代码示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addNewStaff">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add New Staff Member</h4>
<button type="button" id="addNewStaffOff" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="newStaffAdder" id="addNewStaffBtnForm">
<div class="form-group">
<label for="SelectGroup">Select Group:</label>
<div id="SelectGroupToAddStaff"></div>
</div>
<div class="form-group">
<label for="stafftName">Name:</label>
<input type="text" class="form-control" id="stafftName" name="stafftName" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" required>
<span id="StaffNameErrorThrower" class="text-danger"></span>
<span id="StaffNameAvailabilityThrower" class="text-success"></span>
</div>
<div class="form-group">
<label for="stafftNumber">Contact Number:</label>
<input type="text" class="form-control" id="stafftContact" name="stafftContact" autocomplete="off" onkeypress="return /[0-9]/i.test(event.key)" maxlength="11" required>
<span id="StaffContactErrorThrower" class="text-danger"></span>
<span id="StaffContactAvailabilityThrower" class="text-success"></span>
</div>
<div class="form-group">
<label for="selectCountry">Select Country:</label>
<select class="form-control" id="staffCountry" name="staffCountry" required>
<option value="ns">---Select---</option>
<option value="pak">Pakistan</option>
<option value="china">China</option>
</select>
</div>
<div class="form-group">
<div id="citySelectAfterCountry"></div>
</div>
<div class="form-group">
<label for="stafftemail">Email:</label>
<input type="email" class="form-control" id="staffEmail" name="stafftemail" required>
<span id="StaffEmailErrorThrower" class="text-danger"></span>
<span id="StaffEmailAvailabilityThrower" class="text-success"></span>
</div>
<div class="form-group">
<label for="stafftpass">Password:</label>
<input type="password" id="staffttpass" class="form-control" id="" name="staffttpass" required>
<span id="StaffPassErrorThrower" class="text-danger"></span>
</div>
<div class="form-group">
<label for="stafftrpass">Re-type Password</label>
<input type="password" id="stafftrpass" class="form-control" id="" name="stafftrpass" required>
<span id="StaffRpassErrorThrower" class="text-danger"></span>
<span id="StaffpassMatcherThrower" class="text-primary"></span>
</div>
<button type="submit" id="addNewStaffBtn" class="btn btn-primary" name="addNewstafftBtn">Submit</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#addNewStaffBtnForm").on('submit', function(e) {
e.preventDefault();
// 你的 AJAX 请求代码...
$.ajax({
type: "POST",
url: "datasender2.php",
data: $('form.newStaffAdder').serialize(),
success: function(message) {
alert(message);
if (jQuery.trim(message) == "ok") {
Swal.fire(
'Good job!',
'New Member Has has been added Successfully!',
'success'
);
document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
$('#addNewStaffOff').click();
$('#addNewStaffBtnForm').trigger("reset");
} else if (jQuery.trim(message) == "nok") {
Swal.fire(
'Ops',
'Something went wrong, Contact Admin!',
'error'
);
document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
$('#addNewStaffOff').click();
$('#addNewStaffBtnForm').trigger("reset");
}
}
});
});
</script>注意事项
- 确保 jQuery 库已正确引入。
- e.preventDefault() 必须调用，以防止浏览器执行默认的表单提交行为。
- 如果需要更复杂的验证，可以结合使用 HTML5 的 pattern 属性和自定义 JavaScript 验证函数。
总结
通过将提交按钮的 type 设置为 submit 并监听表单的 submit 事件，可以确保在使用 jQuery AJAX 提交表单时，HTML5 的 required 属性能够正常工作，从而实现客户端的表单验证。 这种方法既利用了浏览器内置的验证功能，又可以灵活地使用 AJAX 进行异步提交，提升用户体验。
