如何在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，非常棘手的问题。