Search code examples
javascriptmodal-dialogsweetalertsweetalert2

sweetalert2 multiple swal at the same function


I'd like to make a condition and call a swal for each one (Sweetalert2). But only one of the swal runs. How can I do it?

function validateEmail(email) {
  var regex = /\S+@\S+\.\S+/;
  return regex.test(email);
}

function validateBirth(data) {
  var regex = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  return regex.test(data);
}

function validacao() {
  var data = document.getElementById('birth').value;
  var email = document.getElementById('email').value;
  if (!validateBirth(data)) {
    swal(
      'title..',
      'text..',
      'type..'
    );
  }
  if (!validateEmail(email)) {
    swal(
      'title..',
      'text..',
      'type..'
    );
  }
}

Solution

  • Update 2021:

    Just make your function async and await promises from Swal.fire():

    async function validacao() {
      var data = document.getElementById('birth').value;
      var email = document.getElementById('email').value;
      if (!validateBirth(data)) {
        await Swal.fire(
          'title..',
          'text..',
          'type..'
        );
      }
      if (!validateEmail(email)) {
        await Swal.fire(
          'title..',
          'text..',
          'type..'
        );
      }
    }
    

    Old answer which will not work for latest versions of SweetAlert2:

    There's swal.queue(), use it for multiple modals.

    Your case should look like this:

    var modals = [];
    
    // birth modal
    if (!validateBirth(data)) {
      modals.push({title: 'title1', text: 'text1', ... });
    }
    
    // email modal
    if (!validateEmail(email)) {
      modals.push({title: 'title2', text: 'text2', ... });
    }
    
    Swal.queue(modals);