我有一个基于Bootstrap 5的简单表单,带有一个验证选项,如果使用Sweatalert2成功提交表单字段,我将尝试显示警报消息。
- 这是我的代码:**
- 超文本标记语言**
<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)
})
})()
2条答案
按热度按时间iq0todco1#
我也遇到了同样的问题,偶然发现了这个post,它很有帮助。
下面的代码可能会有所帮助:
它将在表单提交后重新加载页面。
btqmn9zl2#
这可能是为时已晚,但我希望它可以帮助别人。我有同样的问题。然后,我试图合并 Bootstrap 验证内的SweetAlert确认框之前提交的形式。我创建的代码如下:
**
submitForm
是用于提交表单的按钮ID的ID名称。formsubmitsekali
**是表单ID。这样做,如果必填字段未填写,它将显示引导验证,但不显示Sweetalert确认框。但如果所有必填字段均填写,Sweetalert将显示。如果您有电子邮件输入类型,但它是由非电子邮件填写,也会发生相同的行为。它将首先运行引导验证。如果您在输入类型中使用HTML5模式,并且用户填充了错误的模式,它也可以工作。