If 语句中的甜蜜警报

Question

我想在我的网页中插入 SweetAlert2，但我发现很难实现它。如何通过if, else-if 语句在我的代码中使用它。

下面的代码只给了我标准的警告框，有 2 条消息（当有一个空白字段时）并在所有字段都填满时返回消息。

有什么帮助吗？

  $(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

假设您的所有输入都属于 input2 类，您可以大大简化 JQuery。导入库后，SweetAlert 就像使用 swal 而不是 alert 一样简单。

$(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>

`