如何在Ajax验证中使用WTForms？

Question

我习惯在我的烧瓶申请中使用烧瓶WTF的WTForms。执行服务器端验证很简单。但是，我如何利用这个服务器验证成为一个字段级的ajax客户端验证呢？因此，当用户选项卡指向另一个输入字段时，我的应用程序可以直接继续验证它并给出验证警告/info/error。

我还没有在网上找到资源

Answer 1

一个很好的问题。这就是我们要做的（烧瓶后端，jquery前端）：

• 使用ajax表单的jquery.forms插件。相当可靠成熟的代码。缺点是，不能发送json编码的数据，只能表单urlencoded。接收普通或json数据。
• 使用wtfroms进行表单验证。非常成熟的代码库。
• 尝试使用wtforms json来接受json，这是非常奇怪的问题。

Answer 2

可能的解决方案如下：

• 在客户端，将处理程序附加到表单中所有控件中的blur事件。

• 每次发生blur事件时，您都运行一个Javascript函数，该函数收集所有字段的值，然后将它们作为ajax POST请求提交。

• 在服务器上，处理这个ajax POST请求的view函数实例化Flask WTF表单，然后验证它。验证产生的任何错误都会收集到字典中，然后在JSON响应中发送回客户端。

  例如，成功的验证可以返回以下JSON：

  { 
      "errors": {}
  }
  

  包含错误的响应可能是：

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

• 客户机获取这个JSON响应，并将所需的更改应用于DOM以公开错误。

• 如果在返回上一个模糊事件之前获得一个新的模糊事件，则可能需要中止挂起的ajax POST并使用更新的字段值启动一个新的模糊事件。一次只能有一个挂起的验证请求，以避免出现竞争条件。