Sweetalert (Ajx - PHP Form) 仅在输入字段为空时显示成功（警报）答案

【问题标题】：Sweetalert (Ajx - PHP Form) only show success (alert) even when input fields are emptySweetalert (Ajx - PHP Form) 仅在输入字段为空时显示成功（警报）
【发布时间】：2018-12-10 01:35:33
【问题描述】：

我尝试了很多不同的方法来完成这项工作，但没有运气。每次我提交表单时，即使在空字段上也会触发成功 swal 警报。

这是我的 HTML

<!-- Content -->
<div class="content">
    <form role="form" id="form" action="assets/php/mail.php" method="post">

        <div class="row 50%">
            <div class="6u 12u(mobile)">
                <label for="name"></label>
                <input id="name" type="text" name="name" placeholder="Name"/>
                <span></span>
            </div>
            <div class="6u 12u(mobile)">
                <label for="email"></label>
                <input id="email" type="email" name="email" placeholder="Email"/>
            </div>
        </div>

        <div class="row 50%">
            <div class="12u">
                <textarea id="message" name="message" placeholder="Message" rows="7"></textarea>
            </div>
        </div>

        <div class="row">
            <div class="12u">
                <ul class="buttons">
                    <li><input id="submit-button" type="submit" class="special" value="Send" /></li>
                </ul>
            </div>
        </div>

    </form>
</div>

这是 JS 提交后我使用它来清除表单的空 swal 是我让它工作的唯一方法。

$(document).ready(function(){
$('#form').on('submit',function(e) {  //Don't foget to change the id form
$.ajax({
  url:'assets/php/mail.php', //===PHP file name====
  data:$(this).serialize(),
  type:'POST',
  success:function(data){
    console.log(data);
    //Success Message == 'Title', 'Message body', Last one leave as it is
    swal({
      type: 'success',
      title: 'Submmited',
      text: 'Your message has been send!'
    }).then((result) => {
        if (result.value) {
          $("#name").val("");
            $("#email").val("");
            $("#message").val("");
          swal()
         }
      });
  },
  error:function(data){
    //Error Message == 'Title', 'Message body', Last one leave as it is
    swal({
      type: 'error',
      title: 'Oops...',
      text: 'Something went wrong!',
      footer: '<a href>Why do I have this issue?</a>'
    })
  }
});

e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"

});
});

这是我的 PHP，我为此使用了很多不同的 php 代码，但这是最适合我的。

$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);

// Check the data.
if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    header("Location: ../../contact.html");
    exit;
}

$recipient = "php_test@knobcode.com";

// Set the email subject.
$subject = "New contact from $name";

// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";


$email_headers = "From: $name <$email>";

mail($recipient, $subject, $email_content, $email_headers);

header("Location: ../../contact.html");

【问题讨论】：

无论如何，您在 PHP 中对contact.html 的重定向是相同的。前端应该如何知道字段为空？
所以我必须重定向到其他页面？
不，但你必须有一些方法来区分成功和失败。如果您对两者的反应方式相同，您希望它如何工作？
我尝试重定向到索引，但仍然如此。
请原谅我的无知，我在这方面完全是菜鸟。

标签： php jquery forms email sweetalert2

【解决方案1】：

尝试检查 submit 处理程序中的输入：

$('#form').on('submit',function(e) {
  e.preventDefault();
  if( $(this).find("[name='name']").val()!="" &&  // If the 3 aren't empty, it proceeds.
      $(this).find("[name='email']").val()!="" &&
      $(this).find("[name='message']").text()!=""
  ){
    // The rest of your code here... 

  }else{
    alert("Please fill the form before submitting!");  // Or use a swal...
  }
});

关于 Ajax：无论发送的数据如何，当 Ajax 请求成功时都会触发 success 回调。当 Ajax 请求无法完成时，error 回调会触发……比如因为 URL 错误或其他原因。

【讨论】：