我在将Ajax功能与 bootstrap 验证相结合时遇到了问题.我想这可能是Ajax函数中表单调用的问题.
邮箱按照PHP文件正确发送，但不使用Ajax功能.我没有收到任何错误，但Ajax调用被忽略.
我必须在Ajax函数中重新定义表单吗？
// Bootstrap forms validation
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
form.querySelector(".form-control:invalid").focus();
event.preventDefault()
event.stopPropagation()
}
else {
$.ajax({
type: "POST",
url: form.attr('action'),
datatype: "json",
data: form.serialize(),
beforeSend: function () {
form.find(":submit").html("Sending...").prop('disabled', true);
},
error: function (xhr, status, error) {
$(".toast").addClass('bg-danger');
$(".toast-body").text(xhr.status + ': ' + xhr.statusText);
$(".toast").toast("show");
},
success: function (data) {
if (data.success === true) {
form.removeClass('was-validated').trigger("reset");
$(".toast").addClass('bg-success');
}
else {
$(".toast").addClass('bg-danger');
}
$(".toast-body").text(data.message);
$(".toast").toast("show");
}
});
}
form.classList.add('was-validated')
}, false)
});<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact-form" method="post" action="/inc/contact.php" autocomplete="off" class="contact card-body needs-validation" novalidate>
<div class="row">
<div class="col-xl-6">
<div class="form-group">
<input type="text" class="form-control" name="firstname" id="firstname"
placeholder="firstname" required>
</div>
</div>
<div class="col-xl-6">
<div class="form-group">
<input type="text" class="form-control" name="lastname" id="lastname"
placeholder="Lastname" required>
</div>
</div>
<div class="col-xl-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email"
placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
required>
</div>
</div>
<div class="col-xl-6">
<div class="form-group">
<input type="tel" class="form-control" name="phone" id="phone"
placeholder="Phone">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject"
placeholder="Subject" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="message" class="form-control" id="message" cols="30"
rows="4" placeholder="Create a message here" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="row align-items-center">
<div class="col-auto">
<div class="form-group">
<button type="submit" class="btn btn-light">Send <i
class="fa-solid fa-paper-plane"></i></button>
</div>
</div>
<div class="col">
<p class="small mb-0 mt-0">By clicking this button, you agree to the <a
href="" rel="nofollow">terms and
conditions</a>.</p>
</div>
</div>
</div>
</div>
</form>