javascript - SweetAlert2 取消按钮仍在提交表单

Question

我有一个简单的表单，我试图使用 SweetAlert2让用户在提交和处理表单之前确认其提交。

我使用下面的代码来中断提交流程，但是无论用户是否按下模式中的取消点击，表单都会提交。有谁知道我做错了什么？

<script>

$(document).on('click', '#note_submit', function(e) {
    e.preventDefault();
    swal({
        title: "Are you sure?",
         text: "Once deleted, you will not be able to recover this imaginary file!",
        buttons: true,
        dangerMode: true,
        icon: "warning",
        input: 'checkbox',
        inputValue: 0,
        showCancelButton: true,
        inputPlaceholder: ' I agree with the Terms',
        confirmButtonText: 'Continue',
        inputValidator: function (result) {
            return new Promise(function (resolve, reject) {
                if (result) {
                    resolve();
                } else {
                    reject('You need to agree with the Terms');
                }
            })
        }
    }).then(function (result) {
        $('#notes_form').submit();
    });
});


</script>

Answer 1

因为您提到了 inputValidator 参数，所以我相信您正在使用 SweetAlert2 ，不是SweetAlert .

我的另一个猜测是，您最近将 SweetAlert2 更新到了最新版本，并且没有检查发行说明中的​​重大更改:https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0

从 v7.0.0 开始，SweetAlert2 将始终履行 promise ，为了检查对话框是否已提交或取消，您需要检查 result.value:

Swal.fire({
  ...
}).then((result) => {
  if (result.isConfirmed) {
    // A dialog has been submitted

  } else if (result.isDismissed) {
    // A dialog has been cancelled
    // For more information about handling dismissals please visit
    // https://sweetalert2.github.io/#handling-buttons
  }
})