在需要时如何显示弹出错误/成功消息？

Question

这是HTML文件中的javascript代码，还有一个mail.php文件。

主要：

我正在尝试使用“ SweetAlert”创建警报功能。

我希望在表单未通过验证时显示错误消息，在表单通过（发送电子邮件）时显示成功消息。

额外：

验证表单并显示成功消息后，页面将重新加载。 仅当我单击弹出窗口中的“确定”按钮时，页面才能重新加载吗？

<form class="contact100-form validate-form alert" action="mail.php" method="POST">

            <span class="contact100-form-title">
                Contact
            </span>

            <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                <span class="label-input100">Your Name</span>
                <input class="input100" type="text" name="name" placeholder="Enter your name">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
                <span class="label-input100">Email</span>
                <input class="input100" type="text" name="email" placeholder="Enter your email addess">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 validate-input" data-validate = "Message is required">
                <span class="label-input100">Message</span>
                <textarea class="input100" name="message" placeholder="Your message here..."></textarea>
                <span class="focus-input100"></span>
            </div>

            <div class="container-contact100-form-btn">
                <button class="contact100-form-btn">
                    <span>
                        Send
                        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
                </button>
            </div>
</form>



$('.alert').on('submit', function validateForm() {

    var name = document.forms["Form"]["name"].value;
    var email = document.forms["Form"]["email"].value;
    var message = document.forms["Form"]["message"].value;

    if (name == "" || email== "" || message == ""  ) {

        swal("Great!", "We'll get back to you soon!", "success");

        swal("Oops!", "Fill the blanks correctly!", "error" );
    }

  });

现在，当表单既未填写（未验证）又未填写（已提交已验证的表单并且我收到了电子邮件）时，我收到错误消息。

Answer 1

这是因为您将两个警报都放在同一块中。

尝试这个：

if (name == "" || email== "" || message == ""  ) {

    swal("Oops!", "Fill the blanks correctly!", "error" );
}
else
swal("Great!", "We'll get back to you soon!", "success");

就像我看到的代码一样，这里没有提到"Form" 。

以此编辑您的代码。

<form class="contact100-form validate-form alert" name="Form" ..then the rest of code

Answer 2

SweetAlert使用承诺来跟踪用户如何与警报交互。

如果用户单击“确认”按钮，则承诺解析为true。 如果警报被消除（通过在警报外部单击），则承诺解析为null。

swal("Great!", "We'll get back to you soon!", "success")
.then((value) => {
      if(!value) {
          return false;
      }
});