jQuery Validator、AJAX 和 PHP 不能都相处吗？

Question

一直在这个论坛和其他地方寻找答案。没有骰子。我正在使用 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&amp;S to serve your needs more adequately. C&amp;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'>&times;")
            .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 分钟前处理过的电子邮件。我认为这是服务器延迟或其他原因，但希望我的代码中没有讨厌的递归或更糟。

Answer 1

我没有测试过你的代码，但乍一看这里可能有问题：

<button id="submit" type="submit" name="submit" value="submit" class="btn btn-primary btn-success">Submit</button>

您已将button 命名为“提交”，并且还使用“提交”作为id。当您尝试使用 jQuery 提交表单时，我发现两者都会在输入和按钮上触发 jQuery（value 属性无关紧要）。

所以只需将这些属性值更改为不那么危险的危险：

<button id="submitform" type="submit" name="submitform" value="submit" class="btn btn-primary btn-success">Submit</button>

或者如果你不将它们用于任何事情，那就丢掉它们：

<button type="submit" value="submit" class="btn btn-primary btn-success">Submit</button>