如何在Ajax验证中使用WTForms?

时间:2013-11-11 04:42:12

标签: python flask wtforms flask-wtforms

我习惯于在我的烧瓶应用中使用Flask-WTF使用WTForms。进行服务器端验证是微不足道的。但是,如何利用此服务器验证成为字段级别,ajax,客户端验证?因此,当用户选项卡到另一个输入字段时,我的应用程序可以直接验证它并提供验证警告/信息/错误。

我还没有在互联网上找到资源

2 个答案:

答案 0 :(得分:12)

可能的解决方案如下:

  • 在客户端,您将处理程序附加到表单中所有控件中的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并启动一个带有更新字段值的新事件。您应该一次只有一个待处理的验证请求,以避免竞争条件。

答案 1 :(得分:1)

一个很好的问题。这就是我们所做的事情(烧瓶后端,jquery前端):

  • 将jquery.forms插件用于ajax表单。非常扎实的成熟代码。缺点是,无法发送json编码数据,只能形成urlencoded。接收普通或json数据。
  • 使用wtfroms进行表单验证。非常成熟的代码库。
  • 尝试使用wtforms-json接受json,非常棘手的问题。