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使用Promise来跟踪用户如何与警报交互。

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

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

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

2 个答案: