html5 validate form with required =「true」and custom check

我在找什麼：使用required =「true」進行先天html5表單驗證的方法，如果用戶點擊「Submit」按鈕，首先會發生的是自動的HTML 5驗證，它會檢查用戶是否提供「用戶名」。如果不是，那麼它顯示醜陋的錯誤泡泡。html5 validate form with required =「true」and custom check

如果提供了，但是，我再有對數據庫檢查，如果用戶名存在，我自己的自定義驗證。如果是，則返回true（允許提交），否則返回false。發生了什麼：表單正在提交。這就像它不等待成功回調函數返回是否應該提交真/假。

我希望這是很清楚！下面的代碼：

HTML：

<form> 
<input type="text" required="true" id="username" /> 
<button type="submit">Submit</button> 
</form>

JS：

$("form").submit(function() { 
    $.ajax({ 
     url: 'usernamechecker.php?username=' + $("#username").val(), 
     success: function(resp) { 
     if (!resp.UsernameExists) { 
      return true; // allow form submission 
     } 
     return false; // do not allow form submission 
     } 
    }); 
});

來源

2011-11-07 Ian Davis

您需要將「async：false」作爲參數添加到您的ajax調用中，以便在繼續執行其餘代碼之前強制完成調用。

$("form").submit(function(event) { 
    $.ajax({ 
     async: false, 
     url: 'usernamechecker.php?username=' + $("#username").val(), 
     timeout: 1000, 
     success: function(resp) { 
     if (resp.UsernameExists) { 
      event.preventDefault(); // do not allow form submission 
     }, 
     error: function() { 
      //fall back code when there's an error or timeout 
     }, 
    }); 
});

來源

2011-11-07 21:32:36

這可能是一個非常糟糕的主意，因爲這會導致瀏覽器在等待響應時完全凍結。在很少的情況下，同步ajax是有意義的（在我個人的經驗中，沒有，但我會給出這個想法的好處）。 – Pointy

我很喜歡這個想法。但是，在成功回調中，我仍然有「回報真實」嗎？ –

是的。這回答了他的問題，但他肯定需要設置超時以及可能是加載圖形。 –

您無法通過返回一個值那樣的回調。在「submit」處理程序已經返回之後，「成功」的回調將不會運行，直到「ajax」調用完成，long。

取而代之的是，我只是不提交，讓它返回一個錯誤，如果有服務器端的問題（如「使用用戶名」或其他）。進行兩次往返毫無意義。如果沒有問題，它可以完成操作並返回所需的任何結果頁。

來源

2011-11-07 21:31:36 Pointy

html5 validate form with required =「true」and custom check

回答

相關問題