SweetAlert2 - 仅在确认功能后关闭答案

【问题标题】：SweetAlert2 - Only dismiss after confirming fucntionSweetAlert2 - 仅在确认功能后关闭
【发布时间】：2020-11-25 16:14:39
【问题描述】：

我使用preConfirm 仅在输入与值匹配时关闭弹出窗口（确认用户体验）。问题是，如果我输入不匹配的输入并按下删除，按钮将被禁用。

如何设置preConfirm，以便在输入错误后不会禁用按钮？

$(".admin__list").on("click", ".btn--remove", function(e) {
  var $btn = $(this);
  swal({
    title: "Remove User?",
    text: "Are you sure you want to delete and remove all permissions for this user?",
    confirmButtonText: "Remove",
    confirmButtonColor: "#f27474",
    cancelButtonColor: "#d33",
    reverseButtons: true,
    showCancelButton: true,
    html: ' <b class="sweet__code">1234</b>' +
      '<input type="text" class="sweet__input"></>' +
      '<dive class="sweet__error">Error!</>',
    preConfirm: function() {
      return new Promise(function(resolve) {
        var sweetCode = $(".sweet__code").html();
        if ($(".sweet__input").val() == sweetCode) {
          $btn.closest(".admin__item").remove();
          resolve();
        } else if ($(".sweet__input").val() !== sweetCode) {
          $(".sweet__error").show();
        }
      });
    }
  }).then((result) => {
    if (result.value) {}
  });
});

.sweet__error {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

<div class="admin__list">
  <div class="admin__item">
    <button type="button" class="btn btn--remove">Delete</button>
  </div>
  <div class="admin__item">
    <button type="button" class="btn btn--remove">Delete</button>
  </div>
</div>

【问题讨论】：

标签： jquery sweetalert2

【解决方案1】：

Sweetalert2 有一个内置的功能。见documentation。

另外，请查看我的JSFiddle。

$(function() {

  const code = 1234;

  $(".admin__list").on("click", ".btn--remove", function(e) {
swal({
  title: "Remove User?",
  text: "Are you sure you want to delete and remove all permissions for this user?",
  confirmButtonText: "Remove",
  confirmButtonColor: "#f27474",
  cancelButtonColor: "#d33",
  reverseButtons: true,
  showCancelButton: true,
  input: 'text',
  inputValidator: (value) => {
    if (!value || value != code) {
      return 'Invalid input!'
    }
  }
}).then((result) => {
  if (result.value) {
    $(this).closest(".admin__item").remove();
    count();
  }
});
  });

})

.sweet__error {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

<div class="admin__list">
  <div class="admin__item">
    <button type="button" class="btn btn--remove">Delete</button>
  </div>
  <div class="admin__item">
    <button type="button" class="btn btn--remove">Delete</button>
  </div>
</div>

【讨论】：

【解决方案2】：

我能够解决问题，但如果输入与代码不匹配，则强制使用按钮 swal.enableButtons();。

preConfirm: function () {
  return new Promise(function (resolve) {
    var sweetCode = $(".sweet__code").html();
    if ($(".sweet__input").val() == sweetCode) {
      $btn.closest(".admin__item").remove();
      resolve();
    } else if ($(".sweet__input").val() !== sweetCode) {
      $(".sweet__error").addClass("active");
      swal.enableButtons();
    }
  });
}

【讨论】：