是否有可能檢測到表單提交失敗的JavaScript？

我有這樣的簡單形式：是否有可能檢測到表單提交失敗的JavaScript？

<form action="www.faildomain.com"> 
    <input name="foo" value="bar"> 
    <button type="submit">Submit</button> 
</form>

在我的情況下，該操作將失敗。但是，這是否是有效的行爲，但用戶遇到連接錯誤？

是否有不同的JavaScript事件生成或操作系統出我的控制？

來源

2015-05-11 Elias Soares

如果您不處理提交事件，這是失控的。基本上，當你點擊提交按鈕時，瀏覽器會對你的「動作」URL做一個HTTP POST請求。

如果你想在發送前檢查你的輸入有效性，你需要做的是處理表單提交事件：提交。

var myForm = document.getElementById('my-form'); 

// Add a listener to the submit event 
myForm.addEventListener('submit', function (e) { 
    var errors = []; 

    // Check inputs... 

    if(errors.length) { 
     e.preventDefault(); // The browser will not make the HTTP POST request 
     return; 
    } 
});

但是，即使使用此代碼，您永遠不會知道用戶是否有網絡問題。

您可以檢查這種錯誤的唯一方法是使用Ajax（它只是一個HTTP POST請求，異步調用）對您的後端路由進行異步調用。例如，使用jQuery：

$("#myForm").on("submit", function(e) { 
    event.preventDefault(); 

    var data = {}; 

    // Get data from form... 

    // Stop form from submitting normally 
    $.post("www.faildomain.com", data) 
     .done(function(data) { 
      // No problem 
     }, 
     .fail(function (jqXHR, textStatus) { 
      // An error occured (the server responded with an error status, network issue, ...) 
      // More information about the error can be found in jqXHR and textStatus 
     }, 
     .always(function() { 
      // This method is always executed whether there were an error or not 
    });

來源

2015-05-11 15:44:05

如果您使用Ajax提交，您可以通過響應頭獲取它。看看這個插件：

http://malsup.com/jquery/form/#ajaxForm

它會幫助你很多，因爲它已經有一個方法錯誤了點。

來源

2015-05-11 15:03:50

您不需要插件來檢測Ajax錯誤。 jQuery本身就可以做到這一點。然而，沒有清楚的跡象表明jQuery在這裏發揮作用，所以不依賴於添加庫的替代解決方案將更加有用。 –

是的，也不需要插件甚至jQuery。我給出了他的問題的答案，我說通過Ajax是可能的，並且只是添加了一個暗示，這在我看來會很好。 –

是否有可能檢測到表單提交失敗的JavaScript？

回答

相關問題