Javascript WTForms Ajax验证失败

我正在用Python构建我的第一个web应用程序，并使该应用程序更加动态

只要用户填写正确的数据，代码就会正常工作。然而，我现在正在测试一些错误的输入，它失败的地方就在那里。 我使用的是WTForms，在构建非ajax页面时，一切正常，当用户在前端输入错误数据时，应用程序给了前端一个很好的“无效输入”。 现在应用程序中断

表格如下：

class ExpenseForm(FlaskForm):
    list_id = HiddenField(validators=[DataRequired()])
    title = StringField('Expense', validators=[DataRequired()])
    expensetype_id = SelectField('Expense Type', coerce=int)
    price = DecimalField('Cost', places=2, validators=[DataRequired()])
    quantity = IntegerField('Quantity', validators=[DataRequired()])
    currency_id = SelectField('Currency', coerce=int)
    country_id = SelectField('Country', coerce=int)
    city = StringField('City', validators=[DataRequired()])
    date = DateField('Date', validators=[DataRequired()])
    exceptional_cost = BooleanField('Exceptional cost')
    submit = SubmitField('Add')

我的路线：

@bp.route('/commit_expense', methods=['POST'])
@login_required
def commit_expense():
    form = ExpenseForm()
    form.expensetype_id.choices = [(et.id, et.name) for et in Expensetype.query.order_by('name')]
    form.currency_id.choices = [(c.id, c.short) for c in Currency.query.order_by('short')]
    form.country_id.choices = [(co.id, co.name) for co in Country.query.order_by('name')]
    print(form.data)
    if form.validate_on_submit():
        extra_add_expense(form)
        return jsonify({'success': 'Expense added'})
    return jsonify({'error':'Failed to add expense',
                        'form_errors':[{form[field].label: ', '.join(errors)} for field, errors in form.errors.items()]})

还有javascript：

$(function () {
    $("#expense_form").submit(function (event) {
        event.preventDefault(); // Prevent the form from submitting via the browser
        var form = $(this);
        var error_div = $("#form_errors");
        $(error_div).children().remove();
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize()
        }).done(function (data) {
            if (data.error) {
                for (item in data.form_errors) {
                    Object.keys(data.form_errors[item]).forEach(function (key) {
                        $('<p>').text(key + ': ' + data.form_errors[item][key]).addClass("show_error").appendTo(error_div);
                    });
                };
            } else {
                form[0].reset();
                daily_refresh();
            }
        }).fail(function (data) {
            // Finish fail here
        });
    });
});

$（函数（）{
$（“#费用表”）。提交（功能（事件）{
event.preventDefault（）；//防止表单通过浏览器提交
变量形式=$（此）；
var error_div=$（“#form_errors”）；
$（error_div）.children（）.remove（）；
$.ajax({
类型：form.attr（'method'），
url:form.attr（'action'），
数据：form.serialize（）
}).完成（功能（数据）{
if（data.error）{
对于（数据中的项。表单_错误）{
Object.key（data.form_errors[item]）.forEach（function（key）{
$（“”）.text（key+”：“+data.form_errors[item][key]）.addClass（“show_error”）.appendTo（error_div）；
});
};
}否则{
表单[0]。重置（）；
每日刷新（）；
}
}).失败（功能（数据）{
//在这里完成失败
});
});
});

因此，只要我在所有字段中填写正确的信息，一切都会正常进行，但当我填写一些错误的信息时，例如价格，我得到以下信息：

TypeError:键标签（'price'，'Cost'）不是字符串

json消息示例如下：

列表id=2和csrf令牌=IJA0NGJJJNZU1NZG3ODG1ZJHODQ0YZE5ODMWYZKZZTBKNJEYMWQYYJII.Du1lBg.nJJpKiNSV4pnCLsIfzUaqlsmscg&title=ff&expensetype=1&price=f&quantity=1¤cy=2&city=Ghanzhou&country=5&date=2018-12-08

然后我从打印中获得以下数据（form.data）：

{'list_id'：'2'，'title'：'ff'，'expensetype_id'：1'，price'：None'，quantity'：1'，currency_id'：2'，country_id'：5'，city'：'GHanzhaou'，'date'：datetime.date（2018,12,8），'exceptive_cost'：False，'submit'：False，'csrf_token'：'ijangjjnzg1nzod1zg1zjhodq0yze5odmwzzjjjjjjjjjjjjjjyyyyyyyyyjii.Du1lBg.njjjj

现在，我已经针对我的其他非ajax函数进行了测试，当数据不正确时，它们似乎也有一个“无”（例如，其他十进制字段）。 在验证时，它们只返回“DataRequired”错误，页面处理显示

我不太明白失败的原因。 非常感谢您的帮助或见解

---

提前谢谢

表单[field]。label

是一个

label

实例，而不是字符串

使用

表单[field].label.text

获取标签的字符串表示形式

最后一行应该是

 return jsonify({'error':'Failed to add expense',
                 'form_errors':[{form[field].label.text: ', '.join(errors)} for field, errors in form.errors.items()]})

---

就这样！非常感谢，我一直在盲目地盯着它看！我一直在看验证部分。。。