一页中有两种形式的flask-bootstrap [英] flask-bootstrap with two forms in one page

问题描述

我计划在我的烧瓶应用程序的一页中放入两种形式，一种用于编辑常规用户信息，另一种用于重置密码.模板看起来像这样

I plan to put two forms in one page in my flask app, one to edit general user information and the other to reset password. The template looks like this

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}                                                   
<div class="page-header">                                                  
    <h1>Edit Profile</h1>
</div>

{{ wtf.quick_form(form_profile, form_type='horizontal') }}                 

<hr>

{{ wtf.quick_form(form_reset, form_type='horizontal') }}                   

<hr>
{% endblock %} 

每个表单都有一个提交按钮.

Each form has a submit button.

在route函数中，我试图将这两种形式分开

In the route function, I tried to separate the two form like this

form_profile = ProfileForm()
form_reset = ResetForm()

if form_profile.validate_on_submit() and form_profile.submit.data:
    ....
if form_reset.validate_on_submit() and form_reset.submit.data:
    .....

但是没有用.当我单击ResetForm中的按钮时，将执行ProfileForm验证逻辑.

But it didn't work. When I click on the button in the ResetForm, the ProfileForm validation logic is executed.

我怀疑问题是wtf.quick_form()创建了两个相同的提交按钮，但不确定.

I suspect the problem is that wtf.quick_form() creates two identical submit buttons, but not sure.

在这种情况下我该怎么办? bootstrap/wtf.html模板可以处理这种情况吗?

What should I do in this case? Can bootstrap/wtf.html template deal with this situation?

推荐答案

用不同的名称定义这两个SubmitField，如下所示:

Define this two SubmitField with different names, like this:

class Form1(Form):
    name = StringField('name')
    submit1 = SubmitField('submit')

class Form2(Form):
    name = StringField('name')
    submit2 = SubmitField('submit')

然后在view.py中:

....
form1 = Form1()
form2 = Form2()

if form1.submit1.data and form1.validate_on_submit():  # notice the order 
....
if form2.submit2.data and form2.validate_on_submit():  # notice the order 
....

现在问题已解决.

如果您想深入了解它，请继续阅读.

If you want to dive into it, then continue read.

这里是validate_on_submit():

    def validate_on_submit(self):
        """
        Checks if form has been submitted and if so runs validate. This is
        a shortcut, equivalent to ``form.is_submitted() and form.validate()``
        """
        return self.is_submitted() and self.validate()

这是is_submitted():

    def is_submitted(self):
        """
        Checks if form has been submitted. The default case is if the HTTP
        method is **PUT** or **POST**.
        """

        return request and request.method in ("PUT", "POST")

调用form.validate_on_submit()时，无论单击哪个提交按钮，它都会检查是否已通过HTTP方法提交了表单.因此，上面的小技巧只是添加一个过滤器(以检查Submit是否包含数据，即form1.submit1.data).

When you call form.validate_on_submit(), it check if form has been submitted by the HTTP method no matter which submit button was clicked. So the little trick above is just add a filter (to check if submit has data, i.e., form1.submit1.data).

此外，我们更改了if的顺序，因此，当我们单击一个提交时，它仅将validate()调用到此表单，从而防止了这两个表单的验证错误.

Besides, we change the order of if, so when we click one submit, it only call validate() to this form, preventing the validation error for both form.

故事还没有结束.这是.data:

The story isn't over yet. Here is .data:

@property
def data(self):
    return dict((name, f.data) for name, f in iteritems(self._fields))

它返回带有字段名称(键)和字段数据(值)的字典，但是，我们的两个表单提交按钮具有相同的名称submit(键)！

It return a dict with field name(key) and field data(value), however, our two form submit button has same name submit(key)!

当我们单击第一个提交按钮(在form1中)时，来自form1.submit1.data的调用将返回一个这样的字典:

When we click the first submit button(in form1), the call from form1.submit1.data return a dict like this:

temp = {'submit': True}

毫无疑问，当我们调用if form1.submit.data:时，它将返回True.

There is no doubt when we call if form1.submit.data:, it return True.

当我们单击第二个提交按钮(在form2中)时，对if form1.submit.data:中的.data的调用在dict first 中添加键值，然后来自if form2.submit.data:的调用添加另一个键值，字典最终会像这样:

When we click the second submit button(in form2), the call to .data in if form1.submit.data: add a key-value in dict first, then the call from if form2.submit.data: add another key-value, in the end, the dict will like this:

temp = {'submit': False, 'submit': True}

现在我们调用if form1.submit.data:，即使我们单击的提交按钮位于form2中，它也会返回True.

Now we call if form1.submit.data:, it return True, even if the submit button we clicked was in form2.

这就是为什么我们需要用不同的名称定义这两个SubmitField的原因.顺便说一句，谢谢您的阅读(到这里)！

That's why we need to define this two SubmitField with different names. By the way, thanks for reading(to here)!

感谢nos的通知，他添加了一个有关validate()的问题，请查看下面的评论！

Thanks for nos's notice, he add an issue about validate(), check the comments below!

这篇关于一页中有两种形式的flask-bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！