如何确定 wtforms validate_on_submit() 错误条件

Question

当我打电话时：

if form.validate_on_submit():

它返回 false 并且我的 if 语句从不运行我想要的代码。 有没有办法找出验证失败的原因？

基本上我所拥有的是一个以 3 列、1 header 和 1 行开头的表。 每个单元格都有一个 SelectField。 我还有一些 javascript 绑定到一个按钮，该按钮添加了具有默认 SelectField 值的行。 然后是底部的提交按钮。

路线.py

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@app.route('/start', methods=['GET', 'POST'])
def start():

    form = StartForm()

    if form.validate_on_submit():
        print("FORM VALIDATED")
        print(request.get_json())
        return redirect(url_for('global_vars'))

    print("Rendering original page")

    return render_template('start.html', title='Config Provisioning - Start', 
                           form=form, devices=form.all_models)

forms.py

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, SelectField, BooleanField
from wtforms.validators import InputRequired, IPAddress

class StartForm(FlaskForm):

    customer_choices = [('Cust1', 'Cust1'), ('Cust2', 'Cust2')]
    customers = SelectField('Customer: ', choices = customer_choices)

    all_models = [
        {
            'model': 'C9200-48P',
            'stackable': True,
            'modular': True,
            'fixed_ports': 48,
            'fixed_port_naming_pre': ['GigabitEthernet'],
            'fixed_port_naming_post': 'switch_id/0/port',
        },
        {
            'model': 'C9200-24P',
            'stackable': True,
            'modular': True,
            'fixed_ports': 24,
            'fixed_port_naming_pre': ['GigabitEthernet'],
            'fixed_port_naming_post': 'switch_id/0/port',
        },
        {
            'model': 'C9200L-48P-4X',
            'stackable': False,
            'modular': False,
            'fixed_ports': 48,
            'fixed_port_naming_pre': ['GigabitEthernet'],
            'fixed_port_naming_post': 'switch_id/0/port',
        },
        {
            'model': 'C9200L-24P-4X',
            'stackable': False,
            'modular': False,
            'fixed_ports': 24,
            'fixed_port_naming_pre': ['GigabitEthernet'],
            'fixed_port_naming_post': 'switch_id/0/port',
        },
    ]
    choices = []
    for model in all_models:
        choices.append((model['model'], model['model']))
    dev_models = SelectField('', choices=choices, default=choices[0][0], render_kw={"onchange": "devModelsOnChange(this)"})

    choices = []
    for i in range(1,10):
        choices.append((i, str(i)))
    dev_count = SelectField('', choices=choices, default=choices[0])

    choices = [ ('NO','NO'), ('YES', 'YES') ]
    dev_stacked = SelectField('', choices=choices, default='NO')

    submit_button = SubmitField('Submit')

HTML

{% extends "base.html" %}

{% block content %}
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
            {{ form.customers.label }}{{ form.customers }}<br><br><br>
            <table id="dev_table" style="width:50%">
                <th style="text-align:left">Model</th>
                <th style="text-align:left"># of devices</th>
                <th style="text-align:left">Stacked?</th>
                <tr>
                    <td>{{ form.dev_models }}</td>
                    <td>{{ form.dev_count }}</td>
                    {% for device in devices %}
                    {% if form.dev_models.data == device.model and device.stackable %}
                    <td>{{ form.dev_stacked }}</td>
                    {% break %}
                    {% endif %}
                    {% endfor %}
                </tr>
            </table>
            <br><br>
            <button type="button" id="add_device_button">Add Device</button><br><br>
            {{ form.submit_button() }}
        </p>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        function devModelsOnChange(field) {
            var all_models = {{ form.all_models|tojson }};
            selected_model = $(field).val();
            $row = $(field).closest('tr');
            $cell = $row.find('#dev_stacked');
            for (var model of all_models) {
                if ( selected_model == model.model && model.stackable ) {
                    $cell.show();
                    break;
                } else if (selected_model == model.model && ! model.stackable ) {
                    $cell.hide();
                    break;
                };
            };
        };

        $(document).ready(function(){
            $('#add_device_button').click(function() {
                // DEVICE MODEL COLUMN
                var devices = {{ devices|tojson }};
                for (let [i, device] of devices.entries()) {
                    if (i == 0) {
                        var dev_models_option_markup = '<option selected value="' + device.model + '">' + device.model + '</option>';
                    } else {
                        dev_models_option_markup = dev_models_option_markup + '<option value="' + device.model + '">' + device.model + '</option>';
                    };
                };
                var dev_model_markup = '<tr><td><select name="dev_models" id="dev_models" onchange="devModelsOnChange(this)">' + dev_models_option_markup + '</select></td>';

                // DEVICE COUNT COLUMN
                for ( let i = 1; i <= 9; i++) {
                    if (i == 1) {
                        var dev_count_option_markup = '<option selected value=' + i + '>' + i + '</option>';
                    } else {
                        dev_count_option_markup = dev_count_option_markup + '<option value=' + i + '>' + i + '</option>';
                    };
                };
                var dev_count_markup = '<td><select name="dev_count" id="dev_count">' + dev_count_option_markup + '</select></td>';

                // DEV STACKED COLUMN
                var dev_stacked_markup = '<td><select name="dev_stacked" id="dev_stacked"><option selected value="NO">NO</option><option value="YES">YES</option></select></td></tr>'
                markup = dev_model_markup + dev_count_markup + dev_stacked_markup;
                $('#dev_table').append(markup);
                console.log($('#dev_table'))
            });
            $('#submit_button').click(function() {
                console.log($('#dev_table'))
                var tableData = new Array();
                $('#dev_table tr:gt(0)').each(function(row,tr) {
                    tableData[row]={
                        "model" : $(tr).find('td:eq(0)').children(0).val()
                        , "quantity" : $(tr).find('td:eq(1)').children(0).val()
                        , "stacked" : $(tr).find('td:eq(2)').children(0).val()
                    }
                });
                tableData.shift();
                tableData = JSON.stringify({ 'data': tableData });
                console.log(tableData)
                $.ajax({
                   type: "POST",
                   url: "/start",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   data: tableData,
                   success: function(response){
                       console.log(response);
                   },
                   error: function(error){
                       console.log(error);
                   }
                });
            });
        });
    </script>
{% endblock %}

Answer 1

我在发布后大约 10 分钟发现了问题。 如果我打印 form.errors，我就能看到问题出在哪里。 在 form.py 中，当我使用 (integer, string) 创建 SelectField 字段并且当表单值返回时，它发送 (string, string)。 我更新了 form.py 来做（字符串，字符串）。