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将始终履行承诺，为了检查对话框是否已提交或取消，您需要检查result.value：

swal({
  ...
}).then((result) => {
  if (result.value) {
    // A dialog has been submitted

  } else {
    // A dialog has benn cancelled
    // For more information about handling dismissals please visit
    // https://sweetalert2.github.io/#handling-dismissals
  }
})

Answer 2

SweetAlert使用promises来跟踪用户与警报的交互方式。

If the user clicks the confirm button, the promise resolves to true. 
If the alert is dismissed (by clicking outside of it), the promise resolves to null.

在提交

之前检查result值

....    
.then(function (result) {
   if(result){
       $('#notes_form').submit();
   }
  });

Answer 3

不要使用then

替换

}).then(function (result) {
        $('#notes_form').submit();
});

这将只在OK动作

中执行你所拥有的内容

}, function() {
        $('#notes_form').submit();
});

Cancel按钮应该具有默认行为并关闭swal对话框，而无需在您身边做任何事情。

SweetAlert2取消按钮仍然提交表格

3 个答案: