jquery 验证插件 1.14 submitHandler 提交语法

Question

我在 html 中有一个使用 jq 1.14 验证器和 jq 1.11.3 的简单联系表。表单通过 ajax 提交到我的 php 脚本。一切正常，但我注意到一些奇怪的行为，希望能在这里得到答案。这是问题所在：表单提交，接收 json 并执行 .done 函数。好的，那么，当我在页面的另一部分更改一些完全不相关的 css 时，我碰巧点击了刷新，WHAM！，完全空白的页面只有来自（我的公司名称）更重要的是，.ico window 选项卡上的图标是错误的。它是一个完全不同的 .ico，与我根目录中完全不同的项目文件夹（我使用 XAMPP）。那么现在，如果我再次刷新，一切都会完全恢复正常。我认为这可能与我的 submitHandler 提交两次有关，或者可能是缓存问题，但我没有任何线索，也无法在网上的任何地方找到这种行为。我怀疑我是否需要添加 return false 或 event.preventDefault，但无论我将它们放在 submitHandler 中的什么位置，奇怪的行为仍然存在。我还有很多东西要学，但我怀疑这可能是插件本身的错误。

$(document).ready(function (){

    $('#contactForm').validate({ // initialize the plugin

            debug: true,

            rules: {
                name: {
                    required: true,
                    minlength: 3,
                    maxlength: 30
                },
                email: {
                    required: true,
                    maxlength: 30
                },
                msg: {
                    required: true,
                    minlength: 5,
                    maxlength: 256
                },
                human: {
                    required: true,
                    maxlength: 1
                }
            }, // rules

            messages: {
                name: {
                    required: "Gotta have your name",
                    minlength: "Please include your complete name",
                    maxlength: "Name is too long. Please abbreviate."
                },
                email: {
                    required: "We really need your email address.",
                    minlength: "Email address is too short",
                    maxlength: "Email address is too long. Please contact us directly."
                },
                msg: {
                    required: "Please tell us what's on your mind.",
                    minlegth: "Your message is too short",
                    maxlength: "Your message is too long"
                },
                human: {
                    required: "You must provide an answer"
                }
            },  // messages

            submitHandler: function (form) {

                fdata = $(form).serialize();
                console.log("fdata is:  " + fdata);

                $.ajax({
                    type: "POST",
                    url: "processContact.php",
                    data: fdata,
                    dataType: 'json'
                    })
                    .done(function(returnData, jqXHR, textStatus) {
                        //console.log("returnData[0]:  " + returnData[0]);
                        //console.log("returnData[1]:  " + returnData[1]);
                        //alert("submitted!");
                        if (returnData[0] == "sent" && returnData[1] == "OK"){
                            //console.log("HIP HIP HOORAY!!");
                            $('#successCon').fadeIn("slow");
                        }
                        if (returnData[0] != "failed" && returnData[1] != "NOTOK"){
                            $("errorCon").html("<p><i><strong>" + returnData[0] + "</strong></i></p>")
                        } else {
                            $("#errorCon").html("<p>There was a problem sending your message.  Please contact us directly via <i><strong>contact [at] tunetakeout (dot) com</strong></i></p>").fadeIn("slow");
                        }
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            alert("failed!" + textStatus, errorThrown);
                        })
                        .always(function() {
                            $("#contactForm :input").prop("disabled", true);
                        });

                return false;

            }  // submitHandler

    });  // validate

}); // document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form class="form-horizontal" id="contactForm" name="contactForm" method="post">
                            <div class="form-group">
                                <label for="name"><span class="required"></span></label>
                                <input type="text" name="name" class="form-control" placeholder="Your Name..." maxlength="30" />
                            </div>
                            <div class="form-group">
                                <span class="required"></span>
                                <input type="email" name="email" class="form-control" placeholder="Your Email..." maxlength="30" />
                            </div>
                            <div class="form-group">
                                <label for ="name"><span class="required"></span></label>
                                <textarea  class="form-control" name="msg" style="height: 120px;" placeholder="Write your message (256 character max)..."></textarea>
                            </div>
                            <div class="form-group">
                                <label for="human"><span class="required"></span></label>
                                <p>Are you human?</p>
                                <input type="number" name="human" class="form-control" placeholder="What is three times five divided by three?" maxlength="1" />
                            </div>
                            <button type ="reset" id="clear" name="clear" class="btn btn-grey">Clear</button>
                            <button type="submit" id="submit" name="submit" class="btn btn-orange pull-right">SEND</button>
                        </form>
                        <div id="successCon" class="text-center"><p><i><strong>Thank you, your message was sent! We'll be in touch shortly.</strong></i></p></div>
                        <div id="errorCon" class="text-center"></div>

那么，return false 或 event.preventDefault 应该放在哪里呢？我是否需要重新编写代码以手动提交？如果需要，那会是什么样子？

Answer 1

So, where should the return false or the event.preventDefault be placed?

像您所做的那样，将 return false 放在自定义 submitHandler 的末尾。您根本不需要 .preventDefault()，因为插件已经处理好了。

移除the debug: true option.

仅在调试时使用，会阻塞表单的正常提交。

Prevents the form from submitting and tries to help setting up the validation with warnings about missing methods and other debug messages.

jquery 验证插件 1.14 submitHandler 提交语法

jquery validate plugin 1.14 submitHandler submit syntax

ajax

jquery

jquery-validate