始终显示联系表单中的成功消息问题答案

【问题标题】：Issue with success message in a contact form always displayed始终显示联系表单中的成功消息问题
【发布时间】：2016-04-02 07:19:11
【问题描述】：

我将以下代码用于我的联系表单。问题是，只要用户填写联系表单中的所有字段并通过引导验证程序检查，当他们单击“发送”时就会显示“成功”消息。这意味着即使 PHP 文件被完全清空或不包含正确的 smtp 参数（因此可以肯定消息永远不会发送），仍然会显示成功消息。

如何调整 JS 代码，使其也考虑 PHP 脚本的结果？

我不熟悉 PHP 和 JS，但我想应该是这样的：

当用户点击“发送”时，检查 bootstrapvalidator 结果。
如果OK，从PHP脚本获取结果（成功或失败）
如果 bootstrapvalidator 和 PHP 脚本都正常，则显示“成功”消息。如果没有，则显示“警报”消息。

感谢您的帮助

$(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
      submitHandler: function(validator, form, submitButton) {
        $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#contact_form').data('bootstrapValidator').resetForm();
                $('button[name="submit"]').hide();

            var bv = form.data('bootstrapValidator');
            // Use Ajax to submit form data
            $.post(form.attr('action'), form.serialize(), function(result) {
                console.log(result);
            }, 'json');
      },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
            message: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description of your project'
                    }
                    }
                }
            }
        })

});

PHP：

$mail->Subject = "New message from " . $_POST['first_name'] . $_POST['last_name'];
$mail->Body =  $_POST['message']."<br><br>From page: ". str_replace("http://", "", $_SERVER['HTTP_REFERER']) . "<br>" . $_SERVER ['HTTP_USER_AGENT'] ;

$response = array();
if(!$mail->send()) {
  $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
} else {
  $response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}

/* send content type header */
header('Content-Type: application/json');

/* send response as json */
echo json_encode($response);

?>

【问题讨论】：

标签： javascript php twitter-bootstrap

【解决方案1】：

将成功消息的显示从提交处理程序移到您的$.post 上的回调中。

...
submitHandler: function(validator, form, submitButton)  {
    $('#contact_form').data('bootstrapValidator').resetForm();
    $('button[name="submit"]').hide();
    var bv = form.data('bootstrapValidator'); 

    // Use Ajax to submit form data
    $.post(form.attr('action'), form.serialize(), function(result 
    { 
        // Check for valid response from your phone script 
        $('#success_message').slideDown({ opacity: "show" }, "slow");
        console.log(result);
        }, 'json');
  } 
  ...

【讨论】：

【解决方案2】：

您需要通过适当的回调来捕捉各种响应可能性。例如，如果请求/邮寄失败，则应收到fail 回调。如果邮件已发送，则可以触发success回调，as documented here。

在您的代码中，替换：

$.post(form.attr('action'), form.serialize(), function(result) {
    console.log(result);
}, 'json');

这样的：

$.post(form.attr('action'), form.serialize(), function(result) {
    console.log(result);
}, 'json').done(function() {
    alert( "success" );
}).fail(function() {
    alert( "error" );
});

为了真正触发错误回调。确保您的 PHP 脚本不返回 200 OK 状态，而是返回 400 Bad Request 响应。

if(!$mail->send()) {
  $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
  header("HTTP/1.0 400 Bad Request");
} else {
  $response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}

【讨论】：

【解决方案3】：

  submitHandler: function (validator, form, submitButton) {
          $('button[name="submit"]').hide();

          var bv = form.data('bootstrapValidator');
          // Use Ajax to submit form data
          $.post(form.attr('action'), form.serialize(), function (result) {
              if (result.status == 1) {
                  $('#success_message').slideDown({
                      opacity: "show"
                  }, "slow")
                  $('#contact_form').data('bootstrapValidator').resetForm();
              } else {
                  //show the error message 
              }
          }, 'json');

试试这个

【讨论】：