jQuery 验证插件与 event.preventDefault()答案

【问题标题】：jQuery validate plugin with event.preventDefault()jQuery 验证插件与 event.preventDefault()
【发布时间】：2010-12-02 13:07:27
【问题描述】：

我有一个页面，当点击链接时，联系表单会向下滑动（即，它是页面上的一个 div，显示为 .slideDown('slow')

我有 jQuery 验证插件在联系表单上工作，只是我注意到在测试时我有 event.preventDefault();注释掉了。在最终版本中，我希望取消注释，因为我不希望页面在单击提交时重定向甚至发布。

我有发送 Ajax 帖子的提交按钮来发送电子邮件。我怎样才能保留这个功能并且仍然使用 jQuery 的 validate 插件？

【问题讨论】：

标签： jquery ajax jquery-validate

【解决方案1】：

而不是在表单$.bind() 上设置一个操作，而是将click 处理程序设置为表单提交按钮并使用$.post() 发出发布请求。不过要注意几句。首先，您可能应该在表单上设置操作，并让它默认重定向给禁用 Javascript 的人，然后使用 jQuery 从表单中删除操作，并使用 $.bind() click 处理程序到提交按钮页面加载。其次，在我的代码中，当我说使用警报或其他一些可访问的通知时，我的意思是使用 alert() 方法，或者如果您使用 dom 元素来包含通知，请确保使用 WAI-ARIA 活动区域和角色属性来使辅助设备可以访问通知。

 function onFormSubmit(event)
 {
      $.post('http://url.to.your.service', 
             $('#theFormId').serialize(), 
             function(data, textStatus)
             {
                   switch(textStatus)
                   {
                        // Alert or some other 
                        // accessible notification of success/failure
                   }
             }
      );
 }

编辑：有时我真的需要更仔细地阅读问题。因此，您已经在使用提交按钮来发送 AJAX 请求。也许我的可用性 cmets 对您有用，所以我将保留这部分答案。如果您将操作设置为javascript:null(0)、#，或者将目标设置为隐藏的 iframe，则应该也可以。

【讨论】：

实际上我什至不想为这个问题添加赏金，因为它与我不再相关。那好吧。给你免费积分！

【解决方案2】：

试试这个逻辑：

var form = $("#your-form-id");
form.validate(); //jquery validation
form.on("submit", function (e) {
if(!form.valid()) {
    return false; //Check first if the form is valid, otherwise return false which will redirect to validation
}
    e.preventDefault();//If the form is valid, prevent default submission
    // Now proceed to submit your form via ajax below
    // ...
});

【讨论】：