jQuery Validate Plugin w/AJAX 不会提交

Question

对 jQuery 来说非常新。尝试使用 jQuery Validate 插件。在输入我从插件文档、这里的几篇文章、其他网站和视频中一起“弗兰肯斯坦”的代码后，我无法提交这个。 JSHint 显示 5 个错误，从 submitHandler 行开始。

它实际上破坏了我的页面布局，所以我一定把它搞砸了。我确实正确链接了所有依赖库（spinJS、jQuery、jQuery Forms、），因为 jQuery 的其余部分都可以工作。 “工作”是指表单将提交到邮件脚本并发送电子邮件。

输入验证代码页面后，提交时会刷新。 我能够看到“请输入您的名字”等 errorContainer 覆盖，但表单不会提交，但页面完好无损。我添加了一个 submitHandler 并破坏了整个事情。隐藏的、堆叠的 div 是可见的。

表单提交 DID 在添加验证代码之前工作。

我很肯定自始至终都存在错误。这看起来像我需要的吗？任何方向将不胜感激。

***此代码有效：

<script type="text/javascript">
    $(document).ready(function(){
        $('#submit').click(function(){
            $( '#submit' ).prop( "disabled", true );
            $('#spinz').spin('daycare','red');      
            $.post("php/mailer.php", $("#contactInput").serialize(),  function(response) {
                $('#spinz').spin(false);    
                $("#contact").hide();
                $("#8Btn").css("color", "#BCDF62");
                $("#confirm").show("slide");
             });
             return false;
         });
    });
</script>

**这不是

<script type="text/javascript">                 
    $(document).ready(function(){
        $("div .contentBox").hide(); // hides all content divs w/class=contentBox
        $("#homePage").show("slide"); // animates home page loading
        $(".linkButtons").css("color", "white"); // turns   all link text to white (not selected)
        $("#1Btn").addClass("menuLit");
        $("#1Btn").css("color", "#BCDF62");
        $("#submit").prop( "disabled", false );

        /*Validation Code*/
        $(function(){
            $('#contactInput').validate({
                rules: {
                    fNameInput: "required",
                    lNameInput: "required",
                    pNumber:        "required",
                    email:          "required",
                    msgArea:    "required"
                },                          
                messages: {
                    fNameInput: "Please enter your first name.",
                    lNameInput: "Please enter your last name.",
                    pNumber:    "Please enter your phone number.",
                    email:        "Please enter your email address.",
                    msgArea:    "Please type a message."
                },
                errorContainer: $('#errorContainer'),
                errorLabelContainer: $('#errorContainer ul'),
                wrapper: 'li'
            });

            submitHandler: function(form) {
                $('#submit').prop( "disabled", true );
                $('#spinz').spin('daycare','red');      
                $.post("php/mailer.php", $("#contactInput").serialize(),    
                    function(response) {
                        $('#spinz').spin(false);    
                        $("#contact").hide();
                        $("#8Btn").css("color", "#BCDF62");
                        $("#confirm").show("slide"); 
                    }       
                });

<script/>

Answer 1

您应该会在控制台日志中看到一些严重的 JavaScript 错误。

您错误地将submitHandler 置于.validate() 方法之外 以及一些放错位置/缺失的右括号。只需对代码进行缩进和格式化就可以立即发现这些错误...

$('#contactInput').validate({
    rules: {
        ....
    },                          
    messages: {
        ....
    },
    errorContainer: $('#errorContainer'),
    errorLabelContainer: $('#errorContainer ul'),
    wrapper: 'li'
});

submitHandler: function(form) {
    $('#submit').prop( "disabled", true );
    $('#spinz').spin('daycare','red');      
    $.post("php/mailer.php", $("#contactInput").serialize(), function(response) {
        $('#spinz').spin(false);    
        $("#contact").hide();
        $("#8Btn").css("color", "#BCDF62");
        $("#confirm").show("slide"); 
     }   // <- ??    
 }); // <- ??

submitHandler 属于.validate() 方法内部...

$('#contactInput').validate({
    rules: {
        ....
    },                          
    messages: {
        ....
    },
    errorContainer: $('#errorContainer'),
    errorLabelContainer: $('#errorContainer ul'),
    wrapper: 'li',
    submitHandler: function() {
        ....
    }
});

---

旁注：您已将.validate() 方法封装在$(function(){...}) 中。这是一个 DOM 就绪的事件处理程序。问题在于，您已经在另一个 DOM 就绪事件处理程序$(document).ready(function(){...}) 中拥有了这一切。

$(function(){...}) 只是$(document).ready(function(){...}) 的简写，因此将一个放在另一个里面是没有意义的。