javascript Bootstrap V5表单验证和Sweetalert2:提交成功后显示成功消息

wwtsj6pe  于 2022-12-25  发布在  Java
关注(0)|答案(2)|浏览(283)

我有一个基于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)
    })
})()

Live Example

iq0todco

iq0todco1#

我也遇到了同样的问题,偶然发现了这个post,它很有帮助。
下面的代码可能会有所帮助:

......
 form.classList.add('was-validated');

                    if (form.reportValidity()) {
                        event.preventDefault()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Your application has been submitted successfully!',
                            showConfirmButton: false,
                            timer: 2500
                        }).then((result) => {
                            // Reload the Page
                            location.reload();
                        });
                    }

它将在表单提交后重新加载页面。

btqmn9zl

btqmn9zl2#

这可能是为时已晚,但我希望它可以帮助别人。我有同样的问题。然后,我试图合并 Bootstrap 验证内的SweetAlert确认框之前提交的形式。我创建的代码如下:

$('#submitForm').on('click', function (e) {
    e.preventDefault();// prevent form submit
    /*this part is taken from bootstrap validation*/
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function (form) {
        if (form.checkValidity() === false) {
            form.classList.add('was-validated');
        }
        else {
            Swal.fire({
                title: 'Are you sure?',
                text: "It cannot be undone",
                type: 'warning',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, send it!'
            }).then((result) => {
                if (result.value) {
                    /*submit the form*/
                    $("#formsubmitsekali").submit();
                }
            });
        }
    }, false);
});

**submitForm是用于提交表单的按钮ID的ID名称。formsubmitsekali**是表单ID。

这样做,如果必填字段未填写,它将显示引导验证,但不显示Sweetalert确认框。但如果所有必填字段均填写,Sweetalert将显示。如果您有电子邮件输入类型,但它是由非电子邮件填写,也会发生相同的行为。它将首先运行引导验证。如果您在输入类型中使用HTML5模式,并且用户填充了错误的模式,它也可以工作。

相关问题