使用AJAX進行表單驗證需要兩次點擊才能提交​​

Question

我正在使用AJAX調用來驗證表單中的電子郵件字段。這是必要的，因爲我需要驗證電子郵件地址是否已被使用。 我的第一次嘗試導致ajax請求無限循環後，我發現this solution這似乎工作正常。

除了：我需要在表單實際提交之前點擊兩次提交。 有人知道爲什麼嗎？

這是我的js代碼小例子：

$('form').submit(function(event){ 
    event.preventDefault(); 
    $.post('/echo/json', {'mail': $('#test').val()}, function(data){ 
     //decide if valid or not based on data 
     //we assume it's valid an want to submit the form now! 
     $('form').unbind().submit(); 

     //we should only see this for a very short time 
     $('.info').text('should have already submitted'); 
    }, 'json'); 
}); 

這裏是一個jsfiddle。編輯： 對不起，我想我不是很清楚。我插入了一些註釋來澄清： 我想使用AJAX請求的響應來決定是否提交表單或不顯示錯誤，並顯示錯誤。不提交作品，但如果郵件地址有效，則需要點擊兩次提交才能實際提交。這個例子模擬了這種情況。

unbind()是必要的，否則我創建一個無限循環（$('form').submit(...)將被再次調用）。 另外jQuery.post（）是異步的，所以在成功處理程序內部調用event.preventDefault()將無法​​工作，因爲表單已經被提交。

Answer 1

也許這是你需要什麼？

拆散submit事件處理程序，然後觸發$('#submit')點擊：

$('form').submit(function(event){ 
    event.preventDefault(); 
    $.post('/echo/json', {'mail': $('#test').val()}, function(data){ 
     $('form').unbind('submit').find('#submit').trigger('click'); 
     $('.info').text('should have already submitted'); 
    }, 'json'); 
}); 

DEMO

---

另外，使用.one()事件處理程序（使此處理火災只有一次），然後觸發$('#submit')點擊，以便表單在AJAX響應後以正常方式提交。

$('form').one('submit',function(event){ 
    event.preventDefault(); 
    $.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){ 
     //if(data == 'e-mail is valid'){ 
      $('#submit').trigger('click'); 
     //} 
     $('.info').text('should have already submitted'); 
    }, 'json'); 
}); 

DEMO

或者，如果你需要再有提交事件，你可以用.one()事件處理成一個函數：

function ajaxCheck(){ 
    $('form').one('submit',function(event){ 
     event.preventDefault(); 
     $.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){ 
      if(data == 'e-mail is valid'){ 
       // submit the form without AJAX: 
       $('#submit').trigger('click'); 
      }else{ 
       // rebind submit handler, so that e-mail can be validated with AJAX again: 
       ajaxCheck(); 
      } 
      $('.info').text('should have already submitted'); 
     }, 'json'); 
    }); 
} 
// bind single submit handler: 
ajaxCheck(); 

PS。請勿在AJAX data鍵上使用引號。