Блог

Я пытаюсь добавить проверку к модальному режиму с несколькими вводами, который я настроил с помощью SweetAlert2.

Я использую приведенный ниже код, измененный из https://sweetalert2.github.io/#multiple-inputs

  jQuery('body').on('click', '#feedback', async function () {
  const {value: feedback} = await swal.fire ({
  title: 'Send us your feedback!',
  showCancelButton: true,
  confirmButtonText: 'Submit',
  denyButtonText: 'Cancel',
    customClass: {
    content:'full-width'
    },
    html:
    '<input id="ratingValue" type="text" />' 
    '<input id="topicValue" type="text" />' 
    '<input id="comment" type="text" />'
     ,
    preConfirm: () => ({
      rating: jQuery('#ratingValue').val(),
      topic: jQuery('#topicValue').val(),
      comment: jQuery('#comment').val()
      
    })
  }).then((result) => {
      console.log(JSON.stringify(feedback));
      if(feedback.rating != "" amp;amp; feedback.topic != ""){
         Swal.fire('Submitted!', '', 'success')
      }
  });
 

Очевидно, у меня проблема, я передаю объект обратной связи в качестве параметра pass by promise, поэтому я не могу попытаться вызвать его из состояния (then), поскольку переменная еще не инициализирована, и я получаю сообщение об ошибке. Есть ли какой-либо обходной путь для этого? Я хотел бы проверить свои входные данные перед отправкой и иметь возможность разрешить пользователю исправлять себя.

Большое спасибо!

.on('click' принимает функцию обратного вызова, она не возвращает обещание, поэтому вы не можете просто привязаться .then() к ней. Я думаю, вы можете сделать что-то подобное :

 jQuery('body').on('click', '#feedback', clickHandler);

const clickHandler = async () => {

  const feedback = await swal.fire({...});

  console.log(JSON.stringify(feedback));
  if (feedback.rating != "" amp;amp; feedback.topic != "") {
    Swal.fire('Submitted!', '', 'success')
  }
}