How to avoid dialog closes on confirm?

[anialamo]

Hi! I use vuejs-dialog and I use on <button @click=showMyModal. I add a input type email and I need to validate it before continuing. How to avoid dialog.confirm always closes?

showMyModal has this code:

showMyModal:function() {
            let ctx = this;
            let message = {
                title: "My custom title",
                body:
                    '<div class="modal-body my_modal_content">' +
                    '<div class="alert" id="alert_panel" role="alert"></div>' +
                    '<div class="form-group space_form">' +
                    '<label for="recipient_email" class="col-sm-12 col-md-12 control-label">' +
                    'Enter email</label>' +
                    '<div class="col-sm-12 col-md-12">' +
                    '<input type="email" required class="form-control" id="recipient_email" placeholder="Enter email"/>' +
                    '</div>' +
                    '</div>' +
                    '<div class="clear"></div>' +
                    '</div>'
            };

            ctx.$dialog.confirm(message)
                .then(function () {
                    var recipientEmail = document.querySelector('#recipient_email').value;
                    if (recipientEmail.trim() !== "") {
                        if (recipientEmail.endsWith("@myDomain.com") == true) {
                            // Do something & finally close
                        } else {
                            document.querySelector(".my_modal_content #alert_panel").innerHTML("Error, enter a valid email");
                            document.querySelector(".my_modal_content #alert_panel").classList.add("alert-danger");
                            // NOW: This dialog CLOSES
                            // FUTURE: I need this dialog stays OPEN
                        }
                    } else {
                        // NOW: This dialog CLOSES
                        // FUTURE: I need this dialog stays OPEN
                    }
                })
                .catch(function () {
                    // Do nothing, because this dialog CLOSES and this works fine!
                });
        },

And I defined my vuejs-dialog with this code:

Vue.use(VuejsDialog.main.default, {
    html: true,
    loader: false,
    okText: "Accept",
    cancelText: "Cancel",
    animation: 'bounce'
});

[Godofbrowser]

@anialamo Thanks for trying the plugin... Unfortunately, the feature you're requesting doesn't come out of the box.

Reason is because click on vuejs-dialog default buttons resolves the waiting promise (this process can only be done once for every promise). Currently exploring other options for coming versions of vuejs-dialog. Think of vuejs-dialog (current version 1.X and before) as a single responsibility dialog that asks only one question or shows only one info, and then it is dismissed.

A solution that looks more like a hack will be to:

1. Render the dialog
2. Take input and process input
3. If invalid, dismiss dialog and repeat step 1 This obviously means one dialog per input. I will modify your function to look like this showMyModal:function(hasError = false) { and then continue to

                   } else {
                       // NOW: This dialog CLOSES
                       // FUTURE: I need this dialog stays OPEN
                       this.showMyModal(true);
                   }

That said, if you still want to do it in a more elegant way you may want to look at custom dialogs feature.

Please let me know if you're still having trouble getting it to work 😄

[anialamo]

A lot of thanks! This works fine for me!!!