Django表单DateField日期输入字段校验失败不显示错误提示

日期字段错误无法展示由3个代码问题直接导致：

• 模板取错表单对象：视图向模板传递了两个独立表单实例：form对应账号注册的CustomUserCreationForm，e_form对应员工信息的EmployeeForm。hireDate、employeeNumber属于e_form的字段，但你写错误渲染逻辑时，统一从form对象下取字段错误，自然读不到日期校验失败的提示。
• 字段配置冲突：hireDate在表单中设置了required=False，但输入框又加了HTML原生required属性，且仅配置了required场景的错误文案，没有配置日期格式非法（invalid）场景的提示，就算取对了表单对象，非法格式的错误也没有对应展示文案。
• 模板手写HTML标签不规范：所有input标签没有闭合>，id属性引用了不存在的field变量，会导致DOM渲染异常，影响错误提示展示。

按以下顺序修改代码即可解决问题：

1. 修正forms.py字段配置 #

补全日期字段的错误提示，对齐必填逻辑，建议直接在表单类中定义组件属性，减少手写HTML的出错概率：

from django import forms
from users.models import Profile
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm


class CustomUserCreationForm(UserCreationForm):
    email = forms.EmailField(required=True)

    class Meta(UserCreationForm.Meta):
        model = User
        fields = ['username', 'email', 'password1', 'password2']


class EmployeeForm(forms.ModelForm):
    hireDate = forms.DateField(
        required=True,
        error_messages={
            'required': '请输入雇佣日期',
            'invalid': '日期格式无效，请使用YYYY-MM-DD、MM/DD/YYYY或MM/DD/YY格式'
        },
        input_formats=['%Y-%m-%d', '%m/%d/%Y', '%m/%d/%y']
    )
    employeeNumber = forms.CharField(max_length=10, required=True, error_messages={'required': '请输入员工编号'})

    class Meta:
        model = Profile
        fields = ['hireDate', 'employeeNumber']

2. 简化views.py保存逻辑 #

去掉重复实例化表单的冗余代码，保证校验失败时错误信息完整保留在表单实例中：

from django.contrib.auth import login
from django.shortcuts import redirect, render
from django.urls import reverse
from users.forms import CustomUserCreationForm, EmployeeForm
from users.models import User, Profile
from django.contrib.auth.decorators import login_required
from django.contrib import messages


def dashboard(request):
    return render(request, "users/dashboard.html")


def register(request):
    if request.user.is_authenticated:
        return redirect('dashboard')
    
    if request.method == 'POST':
        form = CustomUserCreationForm(request.POST)
        e_form = EmployeeForm(request.POST)
        if form.is_valid() and e_form.is_valid():
            user = form.save()
            # 直接将已校验的员工表单绑定到自动生成的Profile实例保存，无需重复校验
            e_form.instance = user.profile
            e_form.save()
            messages.success(request, 'Your account has been approved!')
            return redirect('login')
    else:
        form = CustomUserCreationForm()
        e_form = EmployeeForm()

    context = {'form': form, 'e_form': e_form}
    return render(request, 'users/register.html', context)

3. 修正模板错误引用 #

将员工字段的错误来源改为e_form，修复HTML标签语法问题，同时补全两个表单的非字段错误、全字段错误兜底渲染：

<form class="text-center" method="post">
    {% csrf_token %}

    <!-- 用户名 -->
    <div class="mb-3">
        <input class="form-control" type="text" name="username" placeholder="Username" required id="id_username">
    </div>
    <div class="text-danger">
        {% for error in form.username.errors %}{{ error }}<br>{% endfor %}
    </div>

    <!-- 邮箱 -->
    <div class="mb-3">
        <input class="form-control" type="email" name="email" placeholder="Email" required id="id_email">
    </div>
    <div class="text-danger">
        {% for error in form.email.errors %}{{ error }}<br>{% endfor %}
    </div>

    <!-- 密码 -->
    <div class="mb-3">
        <input class="form-control" type="password" name="password1" autocomplete="new-password" required id="id_password1" placeholder="Password">
    </div>
    <div class="text-danger">
        {% for error in form.password1.errors %}{{ error }}<br>{% endfor %}
    </div>

    <!-- 确认密码 -->
    <div class="mb-3">
        <input class="form-control" type="password" name="password2" autocomplete="new-password" required id="id_password2" placeholder="Confirm Password">
    </div>
    <div class="text-danger">
        {% for error in form.password2.errors %}{{ error }}<br>{% endfor %}
    </div>

    <!-- 雇佣日期：错误从e_form取 -->
    <div class="mb-3">
        <input class="form-control" type="text" name="hireDate" autocomplete="off" required id="id_hireDate" placeholder="Date of Hire">
    </div>
    <div class="text-danger">
        {% for error in e_form.hireDate.errors %}{{ error }}<br>{% endfor %}
    </div>
    
    <!-- 员工编号：错误从e_form取 -->
    <div class="mb-3">
        <input class="form-control" type="text" name="employeeNumber" autocomplete="off" required id="id_employeeNumber" placeholder="Employee Number">
    </div>
    <div class="text-danger">
        {% for error in e_form.employeeNumber.errors %}{{ error }}<br>{% endfor %}
    </div>

    <!-- 渲染两个表单的全局错误 -->
    {{ form.non_field_errors }}
    {{ e_form.non_field_errors }}

    <!-- 兜底遍历所有字段错误 -->
    <div class="text-danger">
        {% for field in form %}
            {% for error in field.errors %}<p>{{ error }}</p>{% endfor %}
        {% endfor %}
        {% for field in e_form %}
            {% for error in field.errors %}<p>{{ error }}</p>{% endfor %}
        {% endfor %}
    </div>

    <input class="btn btn-primary d-block w-100" type="submit" value="Register">

    <div class="mb-3"></div>
    <a class="text-muted" href="{% url 'login' %}">Back to Login</a>
</form>

修改完成后重启服务，输入非法日期提交即可看到对应的格式错误提示。

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