代码之家  ›  专栏  ›  技术社区  ›  London804

jQuery Validate不适用于AJAX

  •  1
  • London804  · 技术社区  · 12 年前

    在写我的问题之前,我想说的是,我已经读过很多关于StackOverflow的帖子,但我仍然会遇到同样的问题。基本上,无论我以多少种方式更改代码,我的表单都会在没有首先验证每个区域是否已填充的情况下提交。这是我的密码。

     <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">
    
                    <label for="name">Name</label> <br>
                    <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />
    
                    <label for="email">E-mail</label> <br>
                    <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />
    
                    <label for="message">Message/Comment</label> <br>
                    <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />
    
                    <input type="button" name="submit" id="submit" value="Send Message" />
                </form>
    
    $(document).ready(function(){
    $('#contact').validate({
        rules: {
            name: {required: true},
            email: {required: true},
            message: {required: true}
        },
        submitHandler: $(function(form){
    
            $("#submit").on('click', function(){
                var formData = $('#contact').serialize();
                $.ajax({
                    type:"POST",
                    data:formData,
                    url:"E-mail-form.php",
                    done: function(data){
                        $('#contact').html('<p>Your message has been sent. I will reply to you shortly.</p>');
                    },
                    fail: function(data) {
                        $('#contact').html('<p>Sorry there was a problem your message was NOT sent.</p>');
                    }
                });
                return false;
    
            });
        })
    });
    });
    

    现在,我想有人会注意到的第一件事是,我有一个关于提交的函数,但我已经尝试删除了它,即使使用submitHandler,我的表单也不会提交。我认为这就是问题发生的地方,因为当我看到其他有这个问题的论坛时,我不明白是什么导致了表单在没有这个问题的情况下实际提交。任何帮助或解释都将非常有帮助。

    1 回复  |  直到 12 年前
        1
  •  2
  •   Sparky    12 年前

    报价OP:

    “现在我想有人会注意到的第一件事是我 一个关于提交的函数,但我已经尝试删除它和我的表单 即使使用submitHandler也不会提交。我想这就是 问题的出现是因为当我在其他论坛上看到这个 问题我不明白是什么导致表格实际提交 没有这个。任何帮助或解释都将非常有帮助。"

    您需要更仔细地查看这些工作示例的语法,而不是插入随机事件处理程序。放置 click 的内部处理程序 submitHandler 只发射 之后 按钮被点击完全没有意义。

    表单提交时没有 点击 处理程序,因为jQueryValidate插件已经内置了一个。即使您没有使用 子任务处理程序 callback选项,插件会自动捕获 点击 按钮的事件( 只要是 type="submit" )并适当处理。然而,在这种情况下,你仍然会 需要 定义 子任务处理程序 回调,因为它是您的 .ajax() 属于。

    因此,移除 点击 处理程序。

    此外,您的代码存在语法错误:

    submitHandler: $(function(form){
      // your ajax           
    })  
    

    你不把 $() 围绕您的回调函数。

    简单来说就是:

    submitHandler: function(form) {
        // your ajax
    }
    

    或者用你的代码。。。

    submitHandler: function (form) {
        var formData = $(form).serialize();  // <- use the "form" argument here
        $.ajax({
           ....
        });
        return false;
    }
    

    最后,你的按钮需要 type=“提交” 以便插件捕获它。

    <input type="submit" name="submit" id="submit" value="Send Message" />
    

    工作演示 : http://jsfiddle.net/x4h8L/