jQuery验证不以AJAX

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：

“现在我想的第一件事，有人要注意的是，我有 上提交的功能，但我已经试过去除和我简单地形成 韩元“t用submitHandler甚至提出，我认为这也正是 问题发生，因为当我看着其他论坛这个 问题，我不明白是什么原因造成的形式，以实际提交 没有这一点。任何帮助或说明会非常有帮助。“

您需要更仔细地查看这些工作示例的语法，而不是插入随机事件处理程序。把一个click处理程序submitHandler这是只有按钮被点击后解雇内使绝对没有任何意义。

因为jQuery验证插件已经有内置1英寸即使你没有使用submitHandler回调选项，插件会自动捕捉按钮的click事件（只要表单提交，而不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"为了使插件捕捉到它。

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

工作DEMO：http://jsfiddle.net/x4h8L/