Question

我已经尝试过以不同的方式进行这项工作，但是没有运气。每次我提交表单时，成功的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 I.m使用它来清除提交后的表单，这是我使它起作用的唯一方法。

$(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");

Answer 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或其他错误所致。

即使输入字段为空，Sweetalert（Ajx-PHP Form）也仅显示成功（警报）

1 个答案: