jquery 表单验证 ajaxSubmit()答案

【问题标题】：jquery form validation ajaxSubmit()jquery 表单验证 ajaxSubmit()
【发布时间】：2011-05-17 05:25:42
【问题描述】：

我对这个 jquery 表单验证 ajaxSubmit(); 感到非常沮丧；

在 chrome 中，它似乎在没有点击 submitHandler 的情况下静默失败，firefox 确实如此，但仍会进入 action="contact.php" 页面。我期待它只是在后台发布并可能返回结果，但无法让它以这种方式工作。

编辑：如果其他人对此感兴趣，请找到解决此问题的方法，将这行代码放在您的 dom 中的某处准备就绪。

// disable HTML5 native validation and let jquery handle it.
    $('form').attr('novalidate','novalidate');

HTML 表单：

<form method="post" action="contact.php" id="contact">
    <fieldset>
        <input type="text" id="email" class="required email" name="email"  maxlength="30" value="youremail @ example.com" />
        <input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
        <textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
        <input type="submit" class="formBtn" value="Punch me an Email" />
    </fieldset>
</form>

JQuery:

$(window).load(function(){
    $('#contact').validate({
            rules:{
                email:{required: true, email:true},
                subject:{required: true, minlength: 5},
                msg:{required: true, minlength: 50}
            },
            messages:{
                email:'',
                subject: '',
                msg: ''
            },
            invalidHandler:function(){
                $('div.error').hide();
            },
            focusInvalid:true,
            onfocusout:false,
            submitHandler: function() {
               // never hits with chrome, and alert works in FF4, 
               // but still goes to contact.php
               $('#contact').ajaxSubmit();
           }
        });
});

【问题讨论】：

标签： jquery-plugins jquery jquery-validate

【解决方案1】：

我对验证插件不是很熟悉，但我会反过来尝试，通过在表单插件的 beforeSubmit 事件中验证表单：

$('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});

【讨论】：

docs.jquery.com/Plugins/Validation/validate#options 我一直在这个文档页面上下，我按照他们显示的方式进行操作。甚至尝试将其包装在 $('#contact').submit(function(){}) 中，但没有成功。
谢谢。由于我发现表单无法验证的根本原因，您的方法就像一个魅力。

【解决方案2】：

submitHandler 在提交事件触发后被调用，因此ajaxForm 在提交事件之后注册了自己的提交事件处理程序，这可能为时已晚，无法捕获它。

您不必嵌套这两个插件，只需先验证，然后再进行ajaxify：

$('#contact').validate({...});
$('#contact').ajaxForm();

这样，首先调用验证事件处理程序，如果事件无效，则在到达 ajax 提交处理程序之前停止事件。

【讨论】：

什么？如果你这样做，脚本会在验证之前尝试 ajaxSubmit。基本上它会在每次页面加载或刷新时尝试 ajaxsubmit。

【解决方案3】：

<form id="Form1">    
...    
<button type="submit" onclick="return SendData()"> 
</form>

<script>

$(function () {
   $("#Form1").validate();
});

function SendData(){
   if ($("#Form1").valid()) {
      $.ajax({
         url: "/WebService/....",
         type: "post",
         dataType: "json"
         //....
      });

      //do ajax but not submit
      return false;
   }
   // checkdata
   return true;
}
</script>

【讨论】：