沒有使用JS的經驗-如何使用甜蜜警報來確認表單提交？

Question

我只是發現了甜蜜的警報，並希望以簡單的形式確認來實現它，但是我受到了很多信息的轟炸，並且在運氣不好的情況下試圖理解JavaScript。

我想在這里使用成功消息（第三個示例），但是我不明白如何正確地實現這一點。

我也想在之后刷新頁面，但是我需要先解決這個問題。

另外，是否可以使用甜蜜警報來驗證空白字段的表單並顯示錯誤消息？

我知道這一切都是非常基本的內容，對此我將不勝感激，因為我不太了解自己在做什么。

的HTML

<form id="form" class="topBefore" action="<echo htmlspecialchars">
          <div>
                <h5 class="desc">Please Enter Your Information</h5>
             <input type="text" placeholder="DONATION AMOUNT" />
             <input  type="text" placeholder="FIRST NAME">
             <input  type="text" placeholder="LAST NAME">
             <input  type="text" placeholder="ADDRESS" />
             <input type="text" placeholder="CITY" />
             <input type="text" placeholder="STATE" />
             <input type="text" placeholder="ZIP" />
            <input  type="email" placeholder="E-MAIL">
            <input type="text" placeholder="PHONE" />
            <h5>How did you find Flower Spark / All Hallows Guild?</h5>
            <input type="text" placeholder="How did you find Flower Spark?"/>
          <div>
            <h5>Select payment method:</h5>
            <div class="pad-bot">
            <select name="Field106" class="field select medium" tabindex="11"> 
              <option value="First Choice">Credit Card/PayPal</option>
              <option value="Second Choice">Check/Money Order</option>
            </select>
            </div>
          </div>
            <button id="submit">
              <span class="state">Submit</span>
            </button>
    </div>
</form>

JS

swal("Good job!", "You clicked the button!", "success")

Answer 1

$('#form').on('submit', function () {
  swal("Good job!", "You clicked the button!", "success")
});

要么

document.getElementById('submit').addEventListener('click', function () {
  swal("Good job!", "You clicked the button!", "success")
});

Answer 2

將此JavaScript添加到您的頁面中，可以在表單之后，也可以包裝在onload處理程序中：

$("#form").submit(function(e) {
    if(/* Validate form */) {
        swal("Good job!", "You clicked the button!", "success");
        setTimeout(function() {
            window.location = "redirect page";
        }, 3000);
    } else {
        //Display alert
    }

    e.preventDefault();
});

將要驗證表單的任何代碼（例如，檢查缺少的字段）放置在if語句中，並將任何錯誤消息放置在else 。