Sweet Alert in If statements

Question

I want to insert the SweetAlert2 in my webpage but i find hard to implement it. How to use it in my code with if, else-if statements.

The code below only gives me standard alert box, with 2 messages (when there is a blank field) and return message when all the fields are filled.

Any help?

  $(document).ready(function () {
    $("form").on('submit', function (e) {
      if ($('#message').val() == '') {
        alert('Input can not be left blank');
      } 
      else if ($('#name').val() == '') {
        alert('Input can not be left blank');
      } 
      else if ($('#email').val() == '') {
        alert('Input can not be left blank');
      } 
      else
        alert("Thank you for the message, we'll look into the issue and fix it as soon as we can!");

      return false;
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="contact2-form validate-form" >
  <span class="contact2-form-title">
    Contact Us
  </span>
  <div class="wrap-input2 validate-input" data-validate="Name is required">
    <input class="input2" type="text" name="name" id="name">
    <span class="focus-input2" data-placeholder="NAME"></span>
  </div>

  <div class="wrap-input2 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
    <input class="input2" type="text" name="email" id="email">
    <span class="focus-input2" data-placeholder="EMAIL"></span>
  </div>

  <div class="wrap-input2 validate-input" data-validate = "Message is required">
    <textarea class="input2" name="message" id="message"></textarea>
    <span class="focus-input2" data-placeholder="MESSAGE"></span>
  </div>

  <div class="container-contact2-form-btn">
    <div class="wrap-contact2-form-btn">
      <div class="contact2-form-bgbtn"></div>
      <button class="contact2-form-btn" id="submit">
        Send Your Message
      </button>
    </div>
  </div>
</form>

Answer 1

Assuming all of your inputs are of the input2 class you can simplify the JQuery a ton. SweetAlert is as simple as using swal instead of alert once you're imported the library.

$(document).ready(function(){
    $("form").on('submit',function(e){
	$(".input2").each(function() {
      	
        e.preventDefault();
        var input = $(this);
      	
        if(input.val() == ""){         
        	swal(input.attr("name") + " Cannot be blank");      
          return false;
        }
        
        swal("Thank you for the message, we'll look into the issue and fix it as soon as we can!")
      })
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.0/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.0/sweetalert2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="contact2-form validate-form" >
  <span class="contact2-form-title">
    Contact Us
  </span>
  <div class="wrap-input2 validate-input" data-validate="Name is required">
    <input class="input2" type="text" name="name" id="name">
    <span class="focus-input2" data-placeholder="NAME"></span>
  </div>

  <div class="wrap-input2 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
    <input class="input2" type="text" name="email" id="email">
    <span class="focus-input2" data-placeholder="EMAIL"></span>
  </div>

  <div class="wrap-input2 validate-input" data-validate = "Message is required">
    <textarea class="input2" name="message" id="message"></textarea>
    <span class="focus-input2" data-placeholder="MESSAGE"></span>
  </div>

  <div class="container-contact2-form-btn">
    <div class="wrap-contact2-form-btn">
      <div class="contact2-form-bgbtn"></div>
      <button class="contact2-form-btn" id="submit">
        Send Your Message
      </button>
    </div>
  </div>
</form>

`