jqueryvalidator、AJAX和PHP不能相处吗？

一直在这个论坛和其他地方到处寻找答案。没有骰子。我现在正在使用Bootstrap、jQuery验证器和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>

除了必须在表单操作中将URL添加到PHP之外，标记没有太大变化。去掉了重置按钮，那也太毛茸茸了。因此，除了选择下拉菜单上的错误和有效/成功CSS样式外，它仍按原样工作。有时有效，有时无效，主要是一团糟

---

现在，我收到的电子邮件是PHP在5-10分钟前处理的。我认为这是服务器延迟或其他原因，但希望我的代码中不会出现令人讨厌的递归或更糟的情况。

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

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

或者，如果你没有用它们做任何事情，就把它们丢掉：

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

---

有控制台错误吗？你看到ajax开始了吗？如果你使用Firefox或Chrome，请查看开发者控制台ctr+shft+j的网络选项卡。在那里，您应该看到ajax请求的响应，并确切地了解发生了什么。嗨，Sergio！我一直在摆弄jQuery，并将代码更新为包含控制台错误报告。但是，当我在Firefox中使用Chrome和Firebug上的inspector时，它并没有记录脚本中的警报或错误。我整晚都没睡，也没吃东西，有大约26个不同的版本。看起来唯一可行的方法是抛弃AJAX，将PHP的路径放在表单操作中，让它重定向到另一个页面——忘记客户端验证。要让这一切顺利进行实在是太痛苦了。我放弃了用户友好但痛苦的“you know what AJAX”和jQuery验证，在php中对一个独立的联系人页面进行验证，该页面重定向到另一个确认页面。客户将不得不处理。但无论如何，谢谢大家的投入。谢谢，塞巴斯蒂安。我已经改变了我的按钮，我正在使用引导，所以表单只是以这种方式从盒子里出来。但我的新问题是获取重置点击处理程序来触发重置表单；可以在var$validator=$'myFormID.validate{…}；上的验证会话之后或期间调用；。这个特定的jQuery验证插件并没有维护非常清晰的文档，相关方法的链接在网站上也没有了。认真考虑将其全部删除。只是麻烦太多了也许您应该一步一步地使用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
        }
    });
});

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

<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>