1

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

4

1 回答 1

2

引用操作：

“现在我认为有人会注意到的第一件事是我有一个提交功能，但我已经尝试删除它，即使使用 submitHandler 我的表单也不会提交。我认为这就是问题所在，因为当我查看其他有此问题的论坛时，我不明白是什么导致表单在没有这个问题的情况下实际提交。任何帮助或解释都会非常有帮助。

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

表单在没有处理程序的情况下提交，click因为 jQuery Validate 插件已经内置了一个。即使您没有使用submitHandler回调选项，插件也会自动捕获click按钮的事件（只要它是 atype="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"才能让插件捕获它。

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

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

于 2013-09-21T17:55:23.450 回答