Проверка AJAX WTForms завершается неудачно - PullRequest
Новая
       3

Проверка AJAX WTForms завершается неудачно

0 голосов
/ 08 декабря 2018

Я создаю свое первое веб-приложение на Python и делаю приложение более динамичным.

Код работает правильно, пока пользователь заполняет правильные данные.Однако сейчас я проверяю некоторые ошибочные данные, и там они терпят неудачу.Я использую 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
        });
    });
});

Поэтому, пока я заполняю правильную информацию во всех полях, все проходит как надо, но в тот момент, когда я заполняю некоторую неверную информацию, например, по цене, я получаю следующее:

TypeError: ключ этикетки ( 'цена', 'стоимость') не является строкой

сообщение пример JSON является:

list_id = 2 & csrf_token = IjA0NGJjNzU1Nzg3ODg1ZjhhODQ0YzE5ODMwYzkzZTBkNjEyMWQyYjIi.Du1lBg.nJJpKiNSV4pnCLsIfzUaqlsmscg & название =ff & costtype_id = 1 & цена = f & количество = 1¤cy_id = 2 & город = GHanzhaou & country_id = 5 & date = 2018-12-08

Затем я получаю следующие данные из печати (form.data):

{'list_id': '2', 'title': 'ff', 'costtype_id': 1, 'price': None, 'number': 1, 'currency_id': 2, 'country_id': 5, 'city': 'GHanzhaou', 'date': datetime.date (2018, 12, 8), 'exception_cost': False, 'submit': False, 'csrf_token ':' IjA0NGJjNzU1Nzg3ODg1ZjhhODQ0YzE5ODMwYzkzZTBkNjEyMWQyYjIi.Du1lBg.nJJpKiNSV4pnCLsIfzUaqlsmscg '} * * * * * * * *DecimalFields например).В момент проверки они просто возвращают ошибку «DataRequired», и страница обрабатывает отображение.

Я не совсем понимаю причину этого сбоя.Любая помощь или понимание высоко ценится.

Заранее спасибо!

1 Ответ

0 голосов
/ 08 декабря 2018

form[field].label является экземпляром Label, а не строкой.

Используйте form[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()]})
...