Я хочу, чтобы диалоговое окно SweetAlert2 не закрывалось, когда данные не существуют - PullRequest
Новая
       56

Я хочу, чтобы диалоговое окно SweetAlert2 не закрывалось, когда данные не существуют

0 голосов
/ 28 мая 2020

Я создаю всплывающее окно с одноразовым паролем, используя SweetAlert2, и обнаружил, что если я нажму «Отправить», всплывающее окно закроется, даже если данные не существуют в базе данных. Я хочу, чтобы всплывающее окно SweetAlert2 закрывалось, когда ajax вернет данные, а также может кто-нибудь дать совет, если это хорошая практика для OTP. Спасибо. 

$("#otp").click(function (e) {
    var contact = "09182838123";

    var html = "<div class='form-group mt-3'>" +
        '<input class="box-otp" type="text" maxlength="1" id="box1"></input><input class="box-otp" type="text" maxlength="1" id="box2"></input>' +
        '<input class="box-otp" type="text" maxlength="1" id="box3"></input><input class="box-otp" type="text" maxlength="1" id="box4"></input>' +
        '<input class="box-otp" type="text" maxlength="1" id="box5"></input><input class="box-otp" type="text" maxlength="1" id="box6"></input>' +
        "</div>";

    Swal.fire({
        position: 'center',
        icon: 'success',
        title: "One-Time Password",
        html: "<small>We've sent you a OTP code to <b>" + contact + "</b> please enter the OTP code to validate your account.</small><br>" + html,
        showConfirmButton: true,
        confirmButtonText: "Submit",
        showCancelButton: false,
        allowOutsideClick: false,
        preConfirm: function () {
            return new Promise((resolve, reject) => {

                resolve({
                    box1: $("#box1").val(),
                    box2: $("#box2").val(),
                    box3: $("#box3").val(),
                    box4: $("#box4").val(),
                    box5: $("#box5").val(),
                    box6: $("#box6").val()
                });
              

            });
        }

    }).then((data) => {

        if (data.value) {
            var code = data.value.box1 + data.value.box2 + data.value.box3 + data.value.box4 + data.value.box5 + data.value.box6;
            console.log(code);

          $.ajax({
            type: "POST",
            url: "CheckOTP.aspx",
            data: "otp=" + code,
            beforeSend: function() {},
            success: function(result) {
              //if data doesn't exist, pop up will not close
            }
          });


        }


    });
});
.box-otp {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<button id="otp">CLICK</button>
...