Django表单渲染时抛出必填错误且错误位置不符求助

问题描述 #

我创建了一个POST类型的Django表单，包含多个必填输入字段，但页面刚渲染就弹出必填项缺失的错误，而且错误显示在字段上方，不是我指定的下方区块里。

表单定义 #

class Install_Version_Form(forms.Form):
    project = forms.CharField(widget=forms.TextInput(
        attrs={'class': 'textInputAddMach', 'placeholder': "project"}), max_length=100, required=True)
    privacy = forms.ChoiceField(choices=privacy, required=True)
    iteration = forms.CharField(widget=forms.TextInput(
        attrs={'class': 'textInputAddMach', 'placeholder': "iteration"}), max_length=100, required=True)
    machine_name = forms.CharField(widget=forms.TextInput(
        attrs={'class': 'textInputAddMach', 'placeholder': "machine name"}), max_length=100, required=True)
    version = forms.CharField(widget=forms.TextInput(
        attrs={'class': 'textInputAddMach', 'placeholder': "e.g. 0.1"}), max_length=100, required=True)

    def __init__(self, *args, **kwargs):
        super(Install_Version_Form, self).__init__(*args, **kwargs)

    def clean(self):
        cleaned_data = super().clean()

表单视图上下文封装 #

def installation(request):
    ctx = {
        "installVersionForm": None
    }
    ctx["installVersionForm"] = Install_Version_Form(request.POST)
    if request.method == 'POST':
        form = Install_Version_Form(request.POST)
        if form.is_valid():
          (contact cloud)
    else:
        ctx["installVersionForm"] = form
    
    return render(request, "installation.html", ctx)

HTML模板 #

{% block extend_content %}
    <form action="" method="post">
        {% csrf_token %}
        {{installVersionForm.as_p}}
        <input type="submit" value="add new version">
    </form>
    <br/>
    <br/>
    <br/>
    {% if installVersionForm.errors %}
        {% for error in installVersionForm.errors %}
            <small>{{ error }}</small>
        {% endfor %}
    {% endif %}
    {% if installVersionForm.messages %}
        {% for message in installVersionForm.messages %}
            <small>{{ message }}</small>
        {% endfor %}
    {% endif %}
{% endblock %}

问题根源 #

1. 视图初始化逻辑错误：无论请求方法是GET还是POST，代码一开始就用request.POST初始化表单。GET请求时request.POST是空字典，直接传入会触发必填字段的验证，导致页面加载就显示错误。
2. 错误渲染逻辑问题：{{installVersionForm.as_p}}会自动将每个字段的错误渲染在字段附近；同时模板遍历installVersionForm.errors的方式有误，form.errors是字典结构，直接遍历得到的是字段名而非错误信息。

修复步骤 #

1. 修正视图函数逻辑 #

调整表单初始化逻辑：GET请求时创建空表单，仅在POST请求时用request.POST初始化并验证：

def installation(request):
    ctx = {}
    if request.method == 'POST':
        form = Install_Version_Form(request.POST)
        if form.is_valid():
            # 此处编写对接云服务的逻辑
            pass
    else:
        # GET请求时创建空表单
        form = Install_Version_Form()
    ctx["installVersionForm"] = form
    return render(request, "installation.html", ctx)

2. 调整模板渲染，控制错误显示位置 #

若要让错误统一显示在下方区块，需手动渲染每个字段（避免as_p自动渲染错误），同时正确遍历表单错误：

{% block extend_content %}
    <form action="" method="post">
        {% csrf_token %}
        <!-- 手动渲染每个字段，不显示字段内错误 -->
        <p>
            {{ installVersionForm.project.label_tag }}
            {{ installVersionForm.project }}
        </p>
        <p>
            {{ installVersionForm.privacy.label_tag }}
            {{ installVersionForm.privacy }}
        </p>
        <p>
            {{ installVersionForm.iteration.label_tag }}
            {{ installVersionForm.iteration }}
        </p>
        <p>
            {{ installVersionForm.machine_name.label_tag }}
            {{ installVersionForm.machine_name }}
        </p>
        <p>
            {{ installVersionForm.version.label_tag }}
            {{ installVersionForm.version }}
        </p>
        <input type="submit" value="add new version">
    </form>
    <br><br><br>
    <!-- 统一显示所有错误 -->
    {% if installVersionForm.errors %}
        {% for field_errors in installVersionForm.errors.values %}
            {% for error in field_errors %}
                <small style="color: red;">{{ error }}</small><br>
            {% endfor %}
        {% endfor %}
    {% endif %}
{% endblock %}

可选优化：用CSS隐藏默认错误 #

若不想手动渲染所有字段，可通过CSS隐藏as_p生成的字段内错误，再保留下方统一错误展示：

/* 在模板的<style>标签或外部CSS文件中添加 */
.errorlist {
    display: none;
}

内容的提问来源于stack exchange，提问作者Swantewit