CODEWITHSUNDEEP
javascriptjquerysweetalert2
sfarzoso
sfarzoso

Reputation: 1600

Cannot prevent sweet alert from closing

I'm trying to validate the email field before closing the SweetAlert but for some reason the SweetAlert is closing after catching the error:

Swal.fire({
    title: title,
    html: template,
    preConfirm: function (email) {
        email = '';
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                if (email === '') {
                    alert("err");
                    reject('err')
                } else {
                    resolve()
                }
            }, 1000)
        }).catch(err => alert("error catched"))
    },
});

What can I do to prevent the SweetAlert modal from closing when the error is caught?

Thanks

Upvotes: 3

Views: 7096

Answers (1)

Andrew Koster
Andrew Koster

Reputation: 1825

Here's an example that's fully functional (for solving your specific problem):

<html>
    <body>
        <div class="showDialogButton">Show dialog</div>

        <script src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
        <script type="text/javascript">

            $(() => {

                const title = "Hi"
                const template = `<b>hello</b> world`

                $(".showDialogButton").click(() => {
                    Swal.fire({
                        title: title,
                        html: template,
                        preConfirm: function (email) {
                            email = '';
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () {
                                    if (email === '') {

                                        reject('Email is empty!')

                                    } else {

                                        resolve()
                                    }
                                }, 1000)
                            }).catch(err => {
                                alert(`error: ${err}`)
                                return false
                            })
                        },
                    });
                })
            })
        </script>
    </body>
</html>

The default behavior is to close the dialog. In order to override that, you have to return false from the function that you're passing in to .catch.

From https://sweetalert2.github.io/#configuration

Argument: preConfirm

Default value: null

Description: Function to execute before confirm, may be async (Promise-returning) or sync. Returned (or resolved) value can be:

  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value

Upvotes: 4

Related Questions