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

回答

相關問題