如何在Ajax驗證中使用WTForms？

Question

我習慣於在我的燒瓶應用程序中使用Flask-WTF使用WTForms。 進行服務器端驗證是微不足道的。 但是，如何利用此服務器驗證成為字段級別，ajax，客戶端驗證？ 因此，當用戶選項卡到另一個輸入字段時，我的應用程序可以直接驗證它並提供驗證警告/信息/錯誤。

我還沒有在互聯網上找到資源

Answer 1

可能的解決方案如下：

• 在客戶端，您將處理程序附加到窗體中所有控件中的blur事件。

• 每次發生模糊事件時，您都會運行一個Javascript函數來收集所有字段的值，然后將它們作為ajax POST請求提交。

• 在服務器上，處理此ajax POST請求的視圖函數實例化Flask-WTF表單，然后驗證它。 驗證產生的任何錯誤都會收集到字典中，然后通過JSON響應發送回客戶端。

  例如，成功驗證可以返回以下JSON：

   { "errors": {} } 

  包含錯誤的響應可能是：

   { "errors": { "name": "This field is required", "age": "Enter a numeric value between 0 and 99" } } 

• 客戶端獲取此JSON響應並將所需的更改應用於DOM以公開錯誤。

• 如果在前一個返回之前得到一個新的模糊事件，您可能希望中止待處理的ajax POST並啟動一個帶有更新字段值的新事件。 您應該一次只有一個待處理的驗證請求，以避免競爭條件。

Answer 2

一個很好的問題。 這就是我們做的事情（燒瓶后端，jquery前端）：

• 使用jquery.forms插件到ajax表單。 非常扎實的成熟代碼。 缺點是，無法發送json編碼數據，只能形成urlencoded。 接收普通或json數據。
• 使用wtfroms進行表單驗證。 非常成熟的代碼庫。
• 試圖使用wtforms-json接受json，非常棘手的問題。