Кнопка отмены SweetAlert2 по-прежнему отправляет форму

У меня есть простая форма, в которой я пытаюсь использовать 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>

javascript sweetalert2 sweetalert
person user1419810    schedule 16.02.2018    source источник
comment
Используете ли вы SweetAlert или SweetAlert2?   -  person Limon Monte    schedule 16.02.2018

Ответы (3)


arrow_upward
3
arrow_downward

Поскольку вы упомянули параметр inputValidator, я полагаю, что вы используете SweetAlert2, а не SweetAlert.

Еще я предполагаю, что вы недавно обновили SweetAlert2 до последней версии и не проверили примечания к выпуску с критическими изменениями: https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0

Начиная с версии 7.0.0 SweetAlert2 всегда будет выполнять обещание, и чтобы проверить, был ли диалог отправлен или отменен, вам необходимо проверить 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
  }
})
person Limon Monte    schedule 16.02.2018

arrow_upward
0
arrow_downward

SweetAlert использует промисы, чтобы отслеживать, как пользователь взаимодействует с оповещением.

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();
   }
  });
person Siddharth    schedule 16.02.2018

arrow_upward
0
arrow_downward

Не используйте then

Замените это

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

с этим, который будет выполнять то, что у вас есть внутри, только в OK действии

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

Кнопка Cancel должна иметь поведение по умолчанию и закрывать диалоговое окно swal без необходимости каких-либо действий с вашей стороны.

person AlexCode    schedule 16.02.2018