jQuery 验证插件 w/AJAX 不会提交

Question

jQuery 非常新。正在尝试使用 jQuery 验证插件。输入代码后，我 "Frankensteined" 从插件文档、这里的几个帖子、其他网站和视频，我无法提交这个。 JSHint 显示 5 个错误，从 submitHandler 行开始。

它实际上破坏了我的页面布局，所以我必须把它弄得一团糟。我确实正确链接了所有依赖库（spinJS、jQuery、jQuery Forms、），因为 jQuery 的其余部分有效。 "worked" 我的意思是表单将提交给邮件脚本并发送电子邮件。

输入验证代码后，页面将在提交时刷新。我能够看到 "please enter your first name" 等 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() 方法的 之外，还有一些 misplaced/missing 右括号。只需缩进和格式化您的代码即可立即发现这些错误...

$('#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(){...}) 只是 shorthand 对于 $(document).ready(function(){...}) 所以将一个放在另一个里面是没有意义的。

jQuery 验证插件 w/AJAX 不会提交

jQuery Validate Plugin w/AJAX Won't Submit

ajax

jquery

jquery-validate