個別にcss属性を設定する方法
formクラスを作成する際に、__init__メソッド内の中で、self.fields['フィールド名'].widget.attrs['属性名']
で設定する。
例)クラスとプレースホルダーを個別に設定する場合
forms.py
from django import forms
class SampleForm(forms.Form):
name = forms.Charfield(label='お名前', max_length=30)
email = forms.Emailfield(label='メールアドレス')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['name'].widget.attrs['class'] = 'form-control col-9'
self.fields['name'].widget.attrs['placeholder'] = 'お名前を入力してください'
self.fields['email'].widget.attrs['class'] = 'form-control col-9'
self.fields['email'].widget.attrs['placeholder'] = 'メールアドレスを入力してください'
フォームエラーを表示する方法
フィールド単位のエラーを表示する場合は{{ field.errors }}
で、特定のフィールドと紐づかず、cleanメソッドなどで発生するフィールド間で発生するエラーを表示する場合は{{ form.non_field_errors }}
を用いる
例) 下記の場合で名前に「あほ」が含まれている場合、これは特定フィールド(nameフィールド)に紐づくエラーなため、{{ field.errors }}
で「名前に暴言を含めないでください。」と表示される。一方で、カテゴリ1(お仕事の依頼)を選択した上でメールアドレスが未入力でフォームが送信された場合、これはフィールド間で発生するエラーな為、{{ form.non_field_errors }}
で「お仕事の依頼の場合、メールアドレスは必須です。」と表示される。
forms.py
from django import forms
CATEGORIES = (
('1', 'お仕事の依頼'),
('2', 'サイト内容に関する問い合わせ'),
)
class ContactForm(forms.Form):
"""問い合わせ用フォーム"""
name = forms.CharField(label='お名前', max_length=50,required=False, help_text='※任意')
email = forms.EmailField(label='メールアドレス', required=False, help_text='※任意')
text = forms.CharField(label='問い合わせ内容', widget=forms.Textarea)
category = forms.ChoiceField(label='カテゴリ', choices=CATEGORIES)
def clean_name(self):
name = self.cleaned_data.get('name')
if name in ('ばか', 'あほ', 'まぬけ', 'うんこ'):
self.add_error('name', '名前に暴言を含めないでください。')
return name
def clean(self):
category = self.cleaned_data.get('category')
email = self.cleaned_data.get('email')
if category == '1' and not email:
self.add_error(None, 'お仕事の依頼の場合、メールアドレスは必須です。')
return self.cleaned_data
inquiry.html
<form action="" method="POST">
{{ form.non_field_errors }}
{% for field in form %}
<div class="field">
{{ field.label_tag }}
{{ field }}
{% if field.help_text %}
<span class="helptext">{{ field.help_text }}</span>
{% endif %}
{{ field.errors }}
</div>
{% endfor %}
<div class="field">
<button type="submit">送信</button>
</div>
{% csrf_token %}
</form>