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>

`

如果语句中的“甜蜜警报”

1 个答案: