一直在这个论坛和其他地方寻找答案。没有骰子。我正在使用 Bootstrap、jQuery Validator 和 AJAX 的 submitHandler 函数，以及一个相当简单的 PHP 脚本来发送 HTML 电子邮件（目前，仅供我自己用于测试目的）。表单验证良好，所有功能似乎都在命中，当我点击提交时，表单清除......但没有电子邮件通过，甚至没有点击“成功”功能。
我尝试了一个愚蠢的简单 PHP 脚本，它只发送没有内容或表单变量的纯文本电子邮件，但没有雪茄。
HTML 表单：
<form id="cns-contact" class="well form-horizontal" method="post" action="">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Full Name</label>
<div class="controls">
<input id="name" name="name" class="" type="text" placeholder="Full Name" required autocomplete="off">
<!--<div class="err-span">Please enter your first and last name</div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" name="email" class="" type="email" placeholder="Email Address" required autocomplete="off">
<!--<div class="err-span">Please enter a valid email address</div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="company">Company</label>
<div class="controls">
<input id="company" name="company" class="" type="text" name="company" placeholder="Company Name" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="address">Address</label>
<div class="controls">
<input id="address" name="address" class="" type="text" name="address" placeholder="Street Address, Suite/Apt" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="city">City</label>
<div class="controls">
<input id="city" name="city" class="" type="text" placeholder="City" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="state">State</label>
<div class="controls">
<input id="state" name="state" class="" type="text" pattern="[A-Za-z]{2}" placeholder="State" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="zip">Zip</label>
<div class="controls">
<input id="zip" name="zip" class="" type="text" pattern="\d{5}" placeholder="Zip" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="phone">Phone</label>
<div class="controls">
<input id="phone" name="phone" class="" type="text" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="123-456-7890" autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
</fieldset>
<fieldset>
<div class="control-group">
<label class="control-label" for="subject">Service Request</label>
<div class="controls">
<select id="subject" name="subject" class="">
<option value="">I am inquiring about:</option>
<option value="Customer Service">General Customer Service</option>
<option value="Building Automation">Building Automation</option>
<option value="HVAC Services">HVAC Services</option>
<option value="HVAC Construction">HVAC Construction</option>
<option value="Facilities Management">Facilities Management</option>
<option value="Consulting">Consulting</option>
<option value="NFPA Damper Inspection">NFPA Damper Inspection</option>
<option value="Energy Efficiency">Energy Efficiency</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" class="input-xlarge span12" rows="10"></textarea>
</div>
</div>
<p>The information you provide will enable C&S to serve your needs more adequately. C&S respects your privacy and will not disclose this data to any third parties.</p>
<button id="submit" type="submit" name="submit" value="submit" class="btn btn-primary btn-success">Submit</button><button id="reset" type="reset" name="reset" value="reset" class="btn btn-primary btn-danger">Reset</button>
</fieldset>
</div>
</form>
jQuery Validation 脚本（有些行已被注释掉，因为它们似乎干扰了高亮、成功和错误功能）：
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cns-contact').validate({
//establish rules for validation
rules: {
name: { required:true, minlength:2 },
email: { required:true, email:true },
company: { required:true, minlength:2 },
address: { required:true, minlength:2 },
city: { required:true, minlength:2 },
state: { required:true, minlength:2, maxlength:2 },
zip: { required:true, minlength:5, maxlength:5 },
phone: { required:true },
subject: { required:true, valueNotEquals:"-1" },
message: { required:false }
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
company: "Please provide your company name",
address: "Please provide your street address",
city: "Please provide a valid city name",
state: "Please enter your state abbreviation",
zip: "Please enter your 5-digit zip code",
phone: "Please provide your 10-digit phone number",
subject: "Please select the type of service request",
message: ""
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(label) {
label.text('').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
//onkeyup:false,
submitHandler: function(form) {
$.ajax ({
data: $('#cns-contact').serialize(),
type: 'POST',
url: 'scripts/bs.php',
success: function() {
$('#results').html("<div class='alert alert-success'>");
$('#results > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#results > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#results > .alert-success')
.append('</div>');
}
//focusInvalid: false
});
return false;
}
});
});
</script>
最后，PHP 脚本（我偶然发现，我一点也不精通 PHP）：
<?php
$to = 'me@dev-test.com' ;
$from = $_POST['email'] ;
$name = $_POST['name'] ;
$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject = $_POST['subject'] ;
$message = '<html><body>';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>";
$message .= "<tr><td><strong>Company:</strong> </td><td>" . strip_tags($_POST['company']) . "</td></tr>";
$message .= "<tr><td><strong>Address:</strong> </td><td>" . strip_tags($_POST['address']) . "</td></tr>";
$message .= "<tr><td><strong>City:</strong> </td><td>" . strip_tags($_POST['city']) . "</td></tr>";
$message .= "<tr><td><strong>State:</strong> </td><td>" . strip_tags($_POST['state']) . "</td></tr>";
$message .= "<tr><td><strong>Zip:</strong> </td><td>" . strip_tags($_POST['zip']) . "</td></tr>";
$message .= "<tr><td><strong>Phone:</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>";
$message .= "<tr><td><strong>Subject:</strong> </td><td>" . strip_tags($_POST['subject']) . "</td></tr>";
$message .= "<tr><td><strong>Message:</strong> </td><td>" . strip_tags($_POST['message']) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
$headers2 = "From: $to";
$subject2 = "Thank you for contacting us";
$autoreply = "Thank you for contacting us. Somebody will get back to you as soon as possible, usually within 48 hours. If you have any more questions, please consult our website at www.oursite.com";
$send = mail($to, $subject, $message, $headers);
$send2 = mail($from, $subject2, $autoreply, $headers2);
?>
任何建议（或者只是一双最近见过阳光的新眼睛）都是天赐之物。我不知道还能转向哪里。
更新：再见 AJAX，已经采用了应该是表单输入的简单实现 --> 验证 --> 表单数据提交 --> php 处理 --> 重定向到确认页面或错误页面。这是 jQuery：
$(document).ready(function() {
//var validator = $('#cns-contact').validate({
$('#cns-contact').validate({
//establish rules for validation
rules: {
name: { required:true, minlength:2 },
email: { required:true, email:true },
company: { required:true, minlength:2 },
address: { required:true, minlength:2 },
city: { required:true, minlength:2 },
state: { required:true, minlength:2, maxlength:2 },
zip: { required:true, minlength:5, maxlength:5 },
phone: { required:true },
subject: { required:true, valueNotEquals:"-1" }
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
company: "Please provide your company name",
address: "Please provide your street address",
city: "Please provide a valid city name",
state: "Please enter your state abbreviation",
zip: "Please enter your 5-digit zip code",
phone: "Please provide your 10-digit phone number",
subject: "Please select the type of service request"
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
onclick: function(element, event) {
$(element).change(function(){
var $this = $('#subject');
var selectDD = $this.val();
if (selectDD != 0) {
$this.parent().parent().addClass('valid').removeClass('error').addClass('success');
$this.addClass('success');
} else if (selectDD == 0) {
$this.parent().parent().removeClass('valid').addClass('error').removeClass('success');
$this.removeClass('success');
}
})
},
success: function(label) {
label.text('OK').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
onkeyup:false,
submitHandler: function(form) {
form.submit();
//focusInvalid: false
}
});
});
标记没有太大变化，除了必须在表单操作中将 URL 添加到 PHP 中。摆脱了重置按钮，这也太毛茸茸了。所以它按原样工作，除了选择下拉菜单上的错误和有效/成功 CSS 样式。有时有效，有时无效，主要是一团糟。
现在，发生的事情是我收到了 PHP 5-10 分钟前处理的电子邮件。我认为这是服务器延迟或其他原因，但希望我的代码中没有讨厌的递归或更糟。