Sweetalert2 : Unable to trigger the validation message

Question

I have created this sequence of popups with Sweetalert2

The user select an year, wait for generation of the report, and at the end can download the report.

This is the code (simplified)

var startYear = 2017;
$("#test").click(function(){

    var _id = ....;

    var listYears = {};
    for (var i = parseInt(moment().format("YYYY")); i >= startYear; i--) listYears[" " + i] = i;

    swal({
        title: "Data export",
        html : "Select a year and press the <strong>export</strong> button.",
        reverseButtons : true,
        showCancelButton: true,
        cancelButtonText : "Cancel",
        confirmButtonText: "Export",
        validationMessage : "Select a year",
        inputClass : "form-control", /* bootstrap 4 class */
        input: "select",
        inputOptions: listYears,
        inputPlaceholder: "Select..",
    }).then((result) => {
        if (result.value) {

            swal({
                title: 'Wait',
                text: 'Report generation in progress..',
                allowOutsideClick : false,
                showConfirmButton : false,
                onOpen: () => {

                    swal.showLoading();

                    var dataGET = ".....&id=" + _id + "&year=" + parseInt(result.value);
                    var xhr = $.ajax({
                        type: "GET",
                        url: ".....php",
                        data : dataGET,
                        cache: false,
                        success : function(val){
                            var _this = this;
                            if(val == "OK_DOWNLOAD"){

                                var pathDownload = xhr.getResponseHeader(".....");
                                var nameDownload = xhr.getResponseHeader(".....");

                                swal({
                                    type : "success",
                                    title: 'Perfect',
                                    html : 'Now you can download the report<br/><a class="btn btn-custom-secondary mt-3" href="......" target="_blank" id="tempBtnDownloadReport"><span class="icon-download1"></span></a>',
                                    showConfirmButton : false,
                                }); 

                                $("#tempBtnDownloadReport").click(function(){
                                    swal.close();
                                });

                            }else{
                                _this.error();
                            }
                        },
                        error : function(){
                            swal("Attention","Error creating report, please try again.","error");
                        },
                        complete : function(jqXHR,textStatus){
                            swal.hideLoading();
                            xhr = null;
                        }
                    });

                }
            });

        }
    });

My problem is when the user press the export button and the select it hasn't been "selected". I would like to trigger the error message ("Select a year"), something like these examples.

Answer 1

SOLVED

I used the preConfirm event.

 swal({
        title: "Data export",
        html : "Select a year and press the <strong>export</strong> button.",
        reverseButtons : true,
        showCancelButton: true,
        cancelButtonText : "Cancel",
        confirmButtonText: "Export",
        validationMessage : "Select a year",
        inputClass : "form-control",
        input: "select",
        inputOptions: listYears,
        inputPlaceholder: "Select..",
        allowOutsideClick: () => !Swal.isLoading(),
        preConfirm: (test) => {
           if(test == "") Swal.showValidationMessage("Select a year");
        }
    }).then((result) => {
        if (result.value) {

            swal({
                title: 'Wait',
                text: 'Report generation in progress..',
                allowOutsideClick : false,
                showConfirmButton : false,
                onOpen: () => {

                    swal.showLoading();

                    var dataGET = "category=download&cmd=do_excel_report&id=" + _id + "&year=" + parseInt(result.value);

                    var xhr = $.ajax({
                        type: "GET",
                        url: "/" + $("html").data("project") + "/home/command.php",
                        data : dataGET,
                        cache: false,
                        success : function(val){
                            var _this = this;
                            if(val == "OK_DOWNLOAD"){

                                var pathDownload = xhr.getResponseHeader("Custom-Success-Download-Path");
                                var nameDownload = xhr.getResponseHeader("Custom-Success-Download-Name");

                                swal({
                                    type : "success",
                                    title: 'Perfect',
                                    html : 'Now you can download the report<br/><a class="btn btn-custom-secondary mt-3" href="/' + $("html").data("project") + "/home/command.php?category=download&cmd=download_excel_report&path=" + pathDownload + "&name=" + nameDownload + '" target="_blank" id="tempBtnDownloadReport"><span class="icon-download1"></span></a>',
                                    showConfirmButton : false,
                                }); 

                                $("#tempBtnDownloadReport").click(function(){
                                    swal.close();
                                });

                            }else{
                                _this.error();
                            }
                        },
                        error : function(){
                            swal("Attention","Error creating report, please try again.","error");
                        },
                        complete : function(jqXHR,textStatus){
                            swal.hideLoading();
                            xhr = null;
                        }
                    });

                }
            });

        }
    });