Django フォームでエラー発生時に適用される CSS クラスをカスタマイズする方法

django.forms.Form.error_css_class は、Django フォームでフィールドにエラーが発生した際に適用される CSS クラスを指定するための属性です。この属性を設定することで、エラーが発生したフィールドを目立たせるなど、フォームのデザインを自由にカスタマイズできます。

設定方法

forms.Form クラスまたはそのサブクラスで、error_css_class 属性を文字列値で設定します。例えば、以下のコードでは、エラーが発生したフィールドに error という CSS クラスが適用されます。

from django.forms import Form

class MyForm(Form):
    error_css_class = 'error'

    # ... フィールド定義 ...

適用される箇所

error_css_class 属性で設定した CSS クラスは、以下の箇所に適用されます。

• フォーム全体
• エラーメッセージ
• エラーが発生したフィールドの周囲

テンプレートでの利用

error_css_class 属性で設定した CSS クラスは、テンプレート内で以下の方法で利用できます。

• {% for error in form.errors %} ループ内で、各エラーメッセージに error_css_class 属性の値を付与できます。
• {{ form.field.errors }} で出力されるエラーメッセージの周囲に、error_css_class 属性の値を付与できます。

注意点

• error_css_class 属性は、forms.Form クラスまたはそのサブクラスでのみ使用できます。
• error_css_class 属性で設定した CSS クラスは、実際に適用される前に HTML エスケープされます。

応用例

• エラーが発生したフィールドを赤枠で囲む
• エラーメッセージを太字で表示する
• エラーが発生したフィールドにフォーカスを当てる

django.forms.Form.error_css_class 属性は、Django フォームでエラーが発生した際に適用される CSS クラスを指定するための便利な属性です。この属性を活用することで、エラーメッセージを分かりやすく表示したり、フォームのデザインをより洗練したものにすることができます。

django.forms.Form.error_css_class サンプルコード

from django.forms import Form

class MyForm(Form):
    error_css_class = 'error'

    # ... フィールド定義 ...

# テンプレート
{% for error in form.errors %}
    <p style="font-weight: bold;">{{ error }}</p>
{% endfor %}

エラーが発生したフィールドを赤枠で囲む

from django.forms import Form

class MyForm(Form):
    error_css_class = 'error-field'

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <div class="field-wrapper">
            {{ field }}
            <ul class="errors">
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% else %}
        {{ field }}
    {% endif %}
{% endfor %}

# スタイルシート
.error-field {
    border: 1px solid red;
}

エラーが発生したフィールドにフォーカスを当てる

from django.forms import Form

class MyForm(Form):
    error_css_class = 'error-field'

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <script>
            document.getElementById('{{ field.id }}').focus();
        </script>
    {% endif %}
{% endfor %}

# HTML
<input type="text" id="id_name" name="name" />

Bootstrap を使用したエラー表示

from django.forms import Form

class MyForm(Form):
    error_css_class = 'is-invalid'

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <div class="form-group">
            {{ field }}
            <div class="invalid-feedback">
                {% for error in field.errors %}
                    {{ error }}
                {% endfor %}
            </div>
        </div>
    {% else %}
        <div class="form-group">
            {{ field }}
        </div>
    {% endif %}
{% endfor %}

# スタイルシート
.is-invalid {
    border-color: #dc3545;
}

JavaScript を使用したエラーメッセージのアニメーション

from django.forms import Form

class MyForm(Form):
    error_css_class = 'error-field'

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <script>
            const fieldElement = document.getElementById('{{ field.id }}');
            fieldElement.classList.add('error-field');
            setTimeout(() => {
                fieldElement.classList.remove('error-field');
            }, 3000);
        </script>
    {% endif %}
{% endfor %}

# スタイルシート
.error-field {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

カスタムエラーメッセージの表示

from django.forms import Form

class MyForm(Form):
    error_messages = {
        'name': {
            'required': '名前を入力してください。',
            'max_length': '名前は最大20文字までです。',
        },
    }

    # ... フィールド定義 ...

# テンプレート
{% for error in form.errors %}
    <p>{{ error }}</p>
{% endfor %}

エラーメッセージの非表示

from django.forms import Form

class MyForm(Form):
    error_css_class = 'hidden'

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        {% else %}
        {{ field

django.forms.Form.error_css_class 以外の方法

ウィジェットの attrs 属性

各フィールドのウィジェットの attrs 属性に class キーワード引数を追加することで、エラー発生時に適用される CSS クラスを指定できます。

from django.forms import Form, TextInput

class MyForm(Form):
    name = TextInput(attrs={'class': 'form-control'})

    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <div class="form-group has-error">
            {{ field }}
            <ul class="errors">
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% else %}
        <div class="form-group">
            {{ field }}
        </div>
    {% endif %}
{% endfor %}

# スタイルシート
.form-group.has-error {
    border-color: #dc3545;
}

テンプレートの条件分岐

テンプレートで {% if field.errors %} を使用して、エラー発生時にのみ特定の HTML を出力できます。

from django.forms import Form

class MyForm(Form):
    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    {% if field.errors %}
        <div class="error-message">
            {{ field.errors }}
        </div>
    {% endif %}
    {{ field }}
{% endfor %}

# スタイルシート
.error-message {
    color: red;
}

カスタムエラーリスト

django.forms.ErrorList をサブクラス化して、独自のエラー表示ロジックを実装できます。

from django.forms import Form, ErrorList

class MyErrorList(ErrorList):
    def __init__(self, errors):
        super().__init__(errors)

        # エラーメッセージにアイコンを追加する
        for error in self:
            error = '<i class="fa fa-exclamation-triangle"></i> {}'.format(error)

class MyForm(Form):
    error_list_class = MyErrorList

    # ... フィールド定義 ...

# テンプレート
{% for error in form.errors %}
    <p>{{ error }}</p>
{% endfor %}

JavaScript を使用して、エラー発生時に動的に要素を追加したり、スタイルを変更したりできます。

from django.forms import Form

class MyForm(Form):
    # ... フィールド定義 ...

# テンプレート
{% for field in form %}
    <div id="{{ field.id }}">
        {{ field }}
    </div>
{% endfor %}

# JavaScript
const form = document.getElementById('my-form');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const errors = form.querySelectorAll('.error');
    for (const error of errors) {
        error.classList.add('visible');
    }
});

# スタイルシート
.error {
    display: none;
}

.error.visible {
    display: block;
}

django.forms.Form.error_css_class は、エラー発生時に適用される CSS クラスを簡単に指定できる便利な方法です。

より高度なカスタマイズを行う場合は、ウィジェットの attrs 属性、テンプレートの条件分岐、カスタムエラーリスト、JavaScript などの方法を検討してください。