Javascript Bootstrap V5表单验证&;Sweetalert2:成功提交后显示成功消息
我有一个基于Bootstrap5的简单表单,带有一个验证选项。如果表单字段使用Sweatalert2成功提交,我将尝试显示警告消息 这是我的代码: HTMLJavascript Bootstrap V5表单验证&;Sweetalert2:成功提交后显示成功消息,javascript,html,validation,bootstrap-5,Javascript,Html,Validation,Bootstrap 5,我有一个基于Bootstrap5的简单表单,带有一个验证选项。如果表单字段使用Sweatalert2成功提交,我将尝试显示警告消息 这是我的代码: HTML <form action="" method="POST" class="needs-validation" novalidate> <label for="validationCustomUsername" class
<form action="" method="POST" class="needs-validation" novalidate>
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation mb-3">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username *" aria-describedby="inputGroupPrepend" required />
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()