Flask-WTF / WTFormsを使用してFlaskにキャンセルボタンを追加します

Aug 16 2020

前のページに戻るキャンセルボタンを追加したいのですが。私のコードは:forms.py:

from flask_wtf import Form
from wtforms import StringField, HiddenField, SubmitField
from wtforms.validators import DataRequired, Length, ValidationError


def _required(form, field):
    if not field.raw_data or not field.raw_data[0]:
        raise ValidationError('Field is required')

class OrganisationForm(Form):
    id = HiddenField('id', default="-1")
    name = StringField('name', validators=[DataRequired()])
    manager_name = StringField('manager_name')
    address = StringField('address', validators=[DataRequired()])
    city = StringField('city', validators=[DataRequired()])
    postal_code = StringField('postal_code', validators=[DataRequired(), Length(max=16)])
    province = StringField('province', validators=[Length(max=2, message="Can't exceed 2 characters")])
    country = StringField('country', validators=[DataRequired()])
    submit = SubmitField('Add')
    cancel = SubmitField('Cancel')

およびテンプレートページ:

{% block content %}
<div class="content-section">
  {{ utils.flashed_messages() }}
  <div class="center">

      {% if add_orgnisation %}
                <h1>add an organisation</h1>
            {% else %}
                <h1>Edit an organisation</h1>
      {% endif %}
    <br/>
    <br/>
    {{ wtf.quick_form(form,novalidate=True) }}
  </div>
</div>
{% endblock %}

ビュー、py

@orgs.route('/organisations/org_new')
@login_required
def org_new():
    add_orgnisation = True
    form = OrganisationForm()
    return render_template("organisations/organisation_form.html", form=form, title="New Organisation", edit=False, add_orgnisation=add_orgnisation)

キャンセルボタンをクリックすると405エラーが発生します:メソッドは許可されていません。

私の間違いはどこにありますか?[キャンセル]をクリックしたときに前のページに戻るには、何を追加する必要がありますか?

ありがとう

回答

baldy Sep 16 2020 at 10:12

いいえ、TimeFieldを使用して有効な時間のキャプチャを強制しています。私はそれを通常のテキストフィールドに変更しようとはしなかったので、代わりに上記の[キャンセル]リンクオプションを使用しました。私の好みはまだキャンセルボタンを持っていることです。

3 GreyLi Aug 17 2020 at 13:19

キャンセルボタンをクリックすると405エラーが発生します:メソッドは許可されていません。私の間違いはどこにありますか?

フォームを送信すると、データはPOSTリクエストとして送信されます(レンダリングされたフォーム要素はを使用するため<form method="post">)。ただし、ビュー関数ではデフォルトでGETリクエストのみが許可され、POSTリクエストを受け入れるには、次のようにmethodsパラメーターを指定する必要があります。

@orgs.route('/organisations/org_new', methods=['GET', 'POST'])  # <--
@login_required
def org_new():
   # ...

[キャンセル]をクリックしたときに前のページに戻るには、何を追加する必要がありますか?

で作成SubmitFieldされたフィールドは送信ボタン(<input type="submit">)としてレンダリングされるため、クリックするとフォームが送信されます。

キャンセルボタンをクリックしたときに前のページに戻るには、通常、これを実現するための2つの方法があります。

1.ビュー機能で送信ボタンをキャッチします

ベンの答えの方法のように。送信をキャッチして、ユーザーを前のページにリダイレクトするだけです。

@orgs.route('/organisations/org_new', methods=['GET', 'POST'])
@login_required
def org_new():
    if request.method == 'POST':
        if form.cancel.data:  # if cancel button is clicked, the form.cancel.data will be True
            return redirect(url_for('previous_page_view_name'))
    # ...

すでに設定されているのでPSnovalidate=Truewtf.quick_form、あなたが設定する必要はありませんrender_kw={'formnovalidate': True}上のcancelフォームクラスでボタンを押します。

2.フィールドの<a>代わりにボタンを作成しますcancel

通常の<a>要素をキャンセルボタン(class="btn btn-secondary")として作成し、hrefパラメータに前のページのURLを入力できます(cancelフォームクラスにフィールドを追加する必要はありません)。このように、を使用することはできませんwtf.quick_form()。代わりに、次のコマンドを使用して各フィールドを手動でレンダリングする必要がありますwtf.form_field()

<form method="post">
    {{ wtf.form_field(form.id) }}
    {{ wtf.form_field(form.name) }}
    {{ wtf.form_field(form.manager_name) }}
    {{ wtf.form_field(form.address) }}
    ...
    {{ wtf.form_field(form.submit) }}
    <a href="{{ url_for('previous_page_view_name') }}" class="btn btn-secondary">Cancel</a>
</form>
3 Ben Aug 17 2020 at 08:06

これが私にとってどのように機能するかです。

私の形で...

btn_cancel = SubmitField(label='Cancel',
                         render_kw={'formnovalidate': True})

私のPythonコード(あなたの場合はviews.py)では...

if request.method == 'POST':
    if form.btn_cancel.data:
        return redirect(url_for('data'))

直前の編集:ビュー関数がPOSTリクエストを受け入れることを許可することに関する以下のGrayLiのメモも重要です。必ずチェックしてください。