form(formset)の内容をデバッグする

Djangoのform(formset)で保存される内容が？だった時にデバッグする方法として教えてもらったので「こうすれば良いよね」を忘れないように記録。

前提条件

悪いのがフロントエンド側にあるのか、バックエンド側にあるのかわかっていない

サンプルコード

以下のようなHTMLがあると仮定する。

コードは次のリンク先のファイルを元にした。 https://github.com/nibuno/djangoTaskApp/blob/master/mysite/tasks/templates/task/task_edit.html

{% extends "base.html" %}

{% block title %}Task編集{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-4">Edit Task Item</h1>
    <form method="post" class="mb-4" id="edit-task-form">
        {% csrf_token %}
        <div class="mb-4">
            <label for="id_title" class="block text-gray-700 text-sm font-bold mb-2">Title</label>
            <input type="text" name="title" value="{{ form.title.value }}" maxlength="100" required="" id="id_title">
        </div>

        <div class="mb-4">
            <label for="id_content" class="block text-gray-700 text-sm font-bold mb-2">Content</label>
            <textarea name="content" cols="40" rows="10" id="id_content">{{ form.content.value }}</textarea>
            {{ form.content.errors }}
        </div>

        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            登録
        </button>
    </form>
</div>
{% endblock %}
{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('edit-task-form').addEventListener('submit', function(event) {
            // フォームの通常の送信を防ぐ
            event.preventDefault();

            document.getElementById('id_title').value = '入力タイトルを上書きするバグ';
            document.getElementById('id_content').value = '入力コンテンツを上書きするバグ';

            event.target.submit();
        });
    });
</script>
{% endblock %}

上記のコードの場合、画面上で入力した値が保存されない。

原因がどちらにあるかわからない場合、以下のように1つずつ試していくと良い。

また、formを例としているがformsetでも同じ内容となる。

form.is_valid() の内容がTrueかFalseか確認する
1. がTrueの場合、form.cleaned_dataが正しいか確認する（=form側は正常に保存しているので、POSTしているデータ側に問題がある。）
1. がFalseの場合、form.non_field_errors()を見てエラー内容を確認する（=form側はエラーがあるため正常に保存できていない。エラーの内容を修正する。）

備考

今回は明らかにミスが紛れ込んでいるコードだったが、実際に初めてみるコードではどこに何が紛れ込んでいるかわからないこともある。そのため、1つずつ落ち着いてチェックすることが大事だな、と学んだ。