FlaskForm 模态提交自定义验证器未调用答案

【问题标题】：FlaskForm modal submit custom validator not calledFlaskForm 模态提交自定义验证器未调用
【发布时间】：2019-05-20 00:47:55
【问题描述】：

我在模态中使用 FlaskForm。模态设置如下：

<form id="form_id" action="action" method="post" enctype="multipart/form-data">

在页脚内：

<button class="btn btn-primary btn-ok" form="form_id">Save</button>

这意味着当用户点击保存时，它会立即验证并调用“操作”网址。这工作正常，如果其中一个字段未正确验证，它会在该字段上方显示一个漂亮的弹出窗口。

但是，对于一个字段，我一直在尝试设置自定义验证器：

validators=[InputRequired(), validate_function]

但我的问题是使用自动提交功能时没有调用此函数！它似乎只验证现有的验证器，例如“InputRequired()”，但它忽略了我的自定义验证器。

我发现我是否自己验证它，例如当调用操作方法时我这样做：

form = TestForm(obj=request.form)
form.validate():

然后我自己的自定义验证器函数就完美调用了。但我希望在模式表单上点击提交时也能调用它。

我知道我可以拦截提交并在 JQuery 中自己调用验证，然后它可能会工作，但我认为这应该也能工作......有人有答案吗？

【问题讨论】：

标签： jquery validation flask flask-wtforms wtforms

【解决方案1】：

啊，我相信我现在知道为什么这根本行不通。这是因为我实际上从未真正使用过 WTForm 验证。我使用了自动 HTML5 表单验证。这会自动验证字段，例如'必需' 被添加到 html 中。所以我猜 form.validate() 在我的案例中从未真正被调用过。

所以我想唯一的解决方案（同时保持模式打开而不被关闭）是自己在 jquery 中拦截提交和调用验证。希望有一天这对某人有所帮助:)

【讨论】：

只是出于好奇，您不能在 jquery 提交功能上使用 e.preventDefault 维护模态窗口并将表单发布到服务器和用户 form.validate_on_submit() 吗？如果出现错误，您将错误消息返回到 JSON 中，Ajax 会将其作为响应并将其显示在模式窗口中？
或者另一种解决方案是实现两个单独的表单验证层：1) Flask-WTF 以获得更好的安全性 2) Jquery 表单验证。 1) 和 2) 将是几乎相同的验证内容，但 2) 将提供更好的交互性。
@Jessi 建议是设计良好的网络应用程序的唯一实用解决方案。客户端 Javascript 验证可提供更好的 UI，服务器端验证可提供强大的逻辑。 WTforms 提供服务器端（与 webargs 包一样），HTML5 可以做一些有限的验证，否则你需要使用 JS，但通常有集成了这个的 JS 库，例如与 Vue.js 集成的 VeeValidate（如果你知道那个JS框架）
@Jessi 是的，这正是我最终所做的。我发送了使用 ajax 请求序列化的表单，并在 python 中验证了一些东西，然后发送了一个带有状态错误的 json。如果出现错误，它会显示一个警报（并且模态会保留），如果不是，它将在 jquery 中提交它:) 我知道我已经可以做到这一点，但我希望没有必要......但我想是的。
@Jessi 我想知道 jquery form.validate() 的作用。它是否也只进行有限的验证？还是应该实际上也自动执行来自 wtform 的自定义验证器？我认为不会，因为我没有看到它被调用..