jquery表单验证ajaxSubmit（）

我感到非常沮丧，这个jQuery表单验证ajaxSubmit（）;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(); 
      } 
     }); 
});

来源

2011-05-17 robx

我不是很熟悉的验证插件，但我会尝试围绕它的另一种方式，通过验证表单插件的beforeSubmit事件中的表单：

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

来源

2011-05-17 05:53:48 dioslaska

http://docs.jquery.com/Plugins/Validation/validate#options我一直在这个文档页面上下，我做了他们显示的方式。甚至尝试将它封装在$（'＃contact'）。submit（function（）{}）中，但是不行。 – robx 2011-05-17 07:21:14

谢谢。由于我发现表单的根本原因无法验证，因此您的方法就像魅力一样。 – robx 2011-05-17 18:41:26

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

您不必窝两个插件，只需验证第一和第二ajaxify：

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

通过这种方式，验证事件处理程序首先被调用，而该事件得到的AJAX之前停止提交处理程序如果无效。

来源

2011-05-17 07:36:37 Tgr

是什么？如果你这样做，脚本会在它验证之前尝试ajaxSubmit。基本上每次页面加载或刷新时都会尝试ajaxsubmit。 – robx 2011-05-17 16:29:39

@robx：是的，错误的函数名称。固定。 – Tgr 2011-05-18 06:47:58

<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>

来源

2014-07-10 06:16:41 user3020010

jquery表单验证ajaxSubmit（）

回答

相关问题