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

jQuery Validate不适用于AJAX

jquery-validate jquery

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 年前

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/