仅在添加引导程序后 SelectField 中的“不是有效选择”

Question

我正在尝试在 Flask 中构建一个非常基本的应用程序：一个接受来自用户的一些输入的单一表单（我是 Web 开发的新手）。最初我能够启动并运行它，但是当我尝试修改 HTML 以包含 Bootstrap 时，单击提交按钮时出现Not a valid choice 错误。

主应用：

from flask import Flask, render_template, flash, session, redirect, url_for, request
from forms import CustomAnalyticsMenu

app = Flask(__name__)

app.config['SECRET_KEY'] = 'mysecretkey'

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html')

@app.route('/custom_analytics_menu', methods=['GET', 'POST'])
def custom_analytics_menu():
    form = CustomAnalyticsMenu()

    if form.validate_on_submit():
        print("validated_on_submit")
        session['menu_item'] = form.menu_item.data
        return redirect(url_for('submission'))

    else:
        print(form.errors)

    return render_template('custom_analytics_menu.html', form=form)

@app.route('/submission', methods=['GET', 'POST'])
def submission():
    return render_template('submission.html')

if __name__ == '__main__':
    app.run(debug=True)

表格：

from flask_wtf import FlaskForm
from wtforms import StringField, RadioField, SelectField, SubmitField
from wtforms.validators import DataRequired

class CustomAnalyticsMenu(FlaskForm):
    menu_item = SelectField('Menu Item:', choices=[('option_one', 'Option One'),
                                                    ('option_two', 'Option Two'),
                                                    ('option_three', 'Option Three')])
    generate_deck = SubmitField('Generate deck')

HTML：

这是有效的 HTML 代码：

{% extends "layout.html" %}

{% block content %}

<div>
  <form method="POST" action="">
      {{ form.hidden_tag() }}

      {{ form.menu_item.label }} {{ form.menu_item }}

      {{ form.generate_deck() }}
  </form>
</div>

{% endblock %}

但是，当我更改这部分时：

{{ form.menu_item.label }} {{ form.menu_item }}

对此：（我从这里得到：https://getbootstrap.com/docs/4.0/components/forms/#form-controls）

<div class="form-group">
    <label for="menu_item">{{ form.menu_item.label }}</label>
    <select class="form-control" id="menu_item">
    {% for item in form.menu_item.choices %}
        <option>{{ item[-1] }}</option>
    {% endfor %}
    </select>
</div>

我的SelectField 在功能上看起来是一样的（显然它具有 Bootstrap 样式除外），但是现在当我单击提交按钮时，没有任何反应，并且我收到错误 Not a valid choice。这是我正在尝试做的一个 sn-p，我也有一个 RadioField 和一个 StringField 但在尝试应用类似样式时我也会遇到同样的错误。有人可以帮助我了解我哪里出错了吗？

Answer 1

我想我明白了！我看到另一个 StackedOverflow 问题 (Why is my flask form validation returning Not a valid choice?)，他们的 <select> 中有一个 name 字段。我更新了我的 (value, label) 对，使它们匹配（即('Option One', 'Option One') 而不是('option_one', 'Option One')）并将代码更新为：

<div class="form-group">
      <label for="menu_item">{{ form.menu_item.label }}</label>
      <select class="form-control" name="menu_item">
        {% for item in form.menu_item.choices %}
          <option>{{ item[-1] }}</option>
        {% endfor %}
      </select>
  </div>

成功了！或者，我可以让 (value, label) 对保持不变，并使用上面 SuperShoot 答案中的代码。我不能说我完全理解为什么需要name 标签，所以如果有人对此有解释，我很想听听。

Answer 2

已编辑以在 <select> 字段中包含 name 属性作为附加问题的解决方案，并在 @RaghavPaliwal 的回答中进一步解释。

您传递给SelectField 的choices 是a sequence of (value, label) pairs。 在您的示例中，这些是：

[('option_one', 'Option One'), 
 ('option_two', 'Option Two'), 
 ('option_three', 'Option Three')]

这些元组的第一个元素是选项所代表的实际值，并且对您的应用程序而言是有意义的。它需要设置为<option> 标签的value 属性。每个元组中的第二个元素只是选项表示的值的格式良好的表示，以显示给用户。

因此，您需要为每个<option> 标签提供value 属性：

<div class="form-group">
    <label for="menu_item">{{ form.menu_item.label }}</label>
    <select class="form-control" id="menu_item" name="menu_item">
    {% for val, text in form.menu_item.choices %}
        <option value="{{ val }}">{{ text }}</option>
    {% endfor %}
    </select>
</div>

如果您没有为<option> 标签提供value 属性，则标签的内容将作为表单字段的值传递。在您的情况下，这意味着如果选择了 'Option One'，则字符串 'Option One' 将作为字段的值传递。然后表单验证会测试它是否包含在选项值之一中，'option_one'、'option_two' 或 'option_three'，因此验证失败。