如何在Bootstrap主题中按需求实现SweetAlert2表单提交交互

需求：

• 点击提交按钮时先校验表单有效性
• 校验通过后，显示加载状态的SweetAlert直至数据存入数据库
• 数据成功入库显示成功提示，异常则显示错误提示

以下是我目前的代码：

<!DOCTYPE html>

<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="layouts/horizontal-dark-menu/css/light/plugins.css" rel="stylesheet" type="text/css" />
<link href="layouts/horizontal-dark-menu/css/dark/plugins.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="src/assets/css/light/elements/alert.css">
<link rel="stylesheet" type="text/css" href="src/assets/css/dark/elements/alert.css">   
<link href="src/assets/css/light/scrollspyNav.css" rel="stylesheet" type="text/css" />
<link href="src/assets/css/dark/scrollspyNav.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="src/plugins/src/sweetalerts2/sweetalerts2.css">
<link href="src/plugins/css/light/sweetalerts2/custom-sweetalert.css" rel="stylesheet" type="text/css" />
<link href="src/assets/css/dark/scrollspyNav.css" rel="stylesheet" type="text/css" />
<link href="src/plugins/css/dark/sweetalerts2/custom-sweetalert.css" rel="stylesheet" type="text/css" />
<script src="src/assets/jquery.js"></script>
<script src="src/assets/jquery.min.js"></script>
<script>
$("#email").inputmask(
{
mask:"*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy:!1,onBeforePaste:function(m,a){return(m=m.toLowerCase()).replace("mailto:","")},
definitions:{"*":
{
validator:"[0-9A-Za-z!#$%&'*+/=?^_`{|}~-]",
cardinality:1,
casing:"lower"
}
}
}
);
</script>

<form id="supplierForm">
    <div class="mb-3">
        <label class="form-label">供应商名称</label>
        <input type="text" class="form-control" required>
        <div class="valid-feedback">格式正确！</div>
        <div class="invalid-feedback">无效的供应商名称。</div>
    </div>
    <div class="mb-3">
        <label class="form-label">供应商地址</label>
        <textarea class="form-control" required></textarea>
    </div>
    <div class="mb-3">
        <label class="form-label">供应商邮箱</label>
        <input type="email" class="form-control" id="email" required>
        <div class="valid-feedback">格式正确！</div>
    </div>
    <div class="mb-3">
        <label class="form-label">供应商电话</label>
        <input type="text" class="form-control" id="ph-number2" required>
        <div class="valid-feedback">格式正确！</div>
    </div>
    <button class="btn btn-primary mixin" id="btnSubmit">提交表单</button>
</form>

<script src="src/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="src/plugins/src/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="src/plugins/src/mousetrap/mousetrap.min.js"></script>
<script src="src/plugins/src/waves/waves.min.js"></script>
<script src="layouts/horizontal-dark-menu/app.js"></script>
<script src="src/plugins/src/highlight/highlight.pack.js"></script>
<script src="src/assets/js/scrollspyNav.js"></script>
<script src="src/plugins/src/input-mask/jquery.inputmask.bundle.min.js"></script>
<script src="src/plugins/src/input-mask/input-mask.js"></script>
<script src="src/assets/js/forms/bootstrap_validation/bs_validation_script.js"></script>
<script src="src/plugins/src/sweetalerts2/sweetalerts2.min.js"></script>
<script src="src/plugins/src/sweetalerts2/custom-sweetalert.js"></script>

<script>
// 电话格式处理
$("#ph-number2").inputmask({mask:" (999) 9999-9999"});

document.querySelector('.widget-content .mixin').addEventListener('click', function() {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})

    Toast.fire({
        icon: 'success',
        title: '保存成功'
    })
})
</script>

实现完整流程的修改方案 #

1. 完善表单校验触发逻辑 #

确保表单通过Bootstrap原生校验规则生效，给表单添加id="supplierForm"并保留字段的required属性，触发校验时自动显示反馈提示。

2. 重写提交事件，实现完整流程 #

替换原有的点击事件代码，实现校验→加载→提交→反馈的完整流程：

document.querySelector('#btnSubmit').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    const form = document.getElementById('supplierForm');
    
    // 步骤1：触发Bootstrap表单校验
    if (!form.checkValidity()) {
        form.classList.add('was-validated');
        return;
    }
    
    // 步骤2：显示加载状态弹窗
    Swal.fire({
        title: '提交中...',
        text: '请稍候',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading(); // 显示加载动画
        }
    });
    
    // 步骤3：收集表单数据（根据实际字段调整）
    const formData = new FormData(form);
    
    // 步骤4：发起AJAX请求提交数据到后端
    $.ajax({
        url: '你的数据入库接口地址', // 替换为实际后端接口
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            // 步骤5：关闭加载弹窗，显示成功提示
            Swal.close();
            Swal.fire({
                icon: 'success',
                title: '提交成功',
                text: '数据已成功存入数据库',
                timer: 3000,
                showConfirmButton: false
            });
            // 可选：重置表单
            form.reset();
            form.classList.remove('was-validated');
        },
        error: function(xhr, status, error) {
            // 步骤6：关闭加载弹窗，显示错误提示
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: '提交失败',
                text: '数据入库出现异常，请稍后重试',
                confirmButtonText: '确定'
            });
        }
    });
});

3. 代码整合说明 #

将上述JavaScript代码替换原有的点击事件代码，确保jQuery和SweetAlert2的脚本已在页面中正确加载，即可实现需求中的完整流程。

内容的提问来源于stack exchange，提问作者Zein Systems