Question

在我写我的问题之前，我想说我已经阅读了很多有关此问题的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也不会提交。我认为这就是问题发生的地方，因为当我看到有这个问题的其他论坛时，我不明白是什么导致表单实际提交没有它。任何帮助或解释都会非常有帮助。

Answer 1

引用OP：

“现在我认为有人会注意到的第一件事是我有提交功能，但我试过简单地删除它和我的表单即使使用submitHandler也不会提交。我认为那就是问题正在发生，因为当我看到其他论坛时问题我不明白是什么导致表单实际提交没有那个。任何帮助或解释都会非常有用。“

您需要更仔细地查看这些工作示例的语法，而不是插入随机事件处理程序。将click处理程序放在submitHandler内部，只有在单击按钮后才会触发，这绝对没有意义。

表单提交没有click处理程序，因为jQuery Validate插件已经内置了一个。即使你没有使用submitHandler回调选项，插件也会自动捕获{{1按钮的事件（，只要它是click ）并适当地处理它。但是，在这种情况下，您仍然需要来定义type="submit"回调，因为它是您submitHandler所属的地方。

所以删除.ajax()处理程序。

此外，您的代码有语法错误：

click

您没有将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="submit"

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

jQuery Validate不适用于AJAX

1 个答案: