Question

我使用jq 1.14验证器和jq 1.11.3在html中有一个简单的联系表单。表单通过ajax提交到我的php脚本。它一切正常，但我注意到一些奇怪的行为，我希望在这里得到答案。这是问题：表单提交，接收json并执行.done函数。好吧那么，当我在页面的另一部分和WHAM上更改了一些完全不相关的CSS时，我碰巧刷新了！完全空白的页面只有来自（我的公司名称）的更多，窗口选项卡上的.ico是错误的图标。它与我根上完全不同的项目文件夹完全不同.ico（我使用XAMPP）。现在，如果我再次刷新，一切都会完全恢复正常。我认为这可能与我的submitHandler提交两次或者缓存问题有关，但我没有线索，也无法在网上找到这种行为。我怀疑我需要添加一个返回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>

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

Answer 1

那么，return false或event.preventDefault应该放在哪里？

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

删除the debug: true option。

它仅在调试期间使用，并将阻止表单的正常提交。

阻止表单提交并尝试帮助设置验证，并提供有关缺少方法和其他调试消息的警告。

jquery validate plugin 1.14 submitHandler提交语法

1 个答案: