设置{{ user.email }}为Django表单输入值后无法保存问题求助

现象 #

已登录用户提交POST请求时，尽管通过JavaScript设置了隐藏邮箱输入框的value，且开发者工具确认值已正确显示，但表单后端验证仍提示「邮箱字段为必填项」。打印表单错误信息如下：

field_error: email <ul class="errorlist"><li>This field is required.</li></ul>

我的尝试 #

1. 用JavaScript设置邮箱输入框值并隐藏：

document.querySelector("#id_email").setAttribute("value", "{{user.email}}")
document.querySelector("#id_email").value = "{{user.email}}"
document.querySelector("#id_email").style.display = "none"

2. 开发者工具确认输入标签属性：

<input type="email" name="email" maxlength="320" required id="id_email" value="test@gmail.com" style="display: none;">

相关代码 #

forms.py #

class UserDataForm(forms.Form):
    email = forms.EmailField(required=True, label="Email address")
    # 其他字段

models.py #

class UserDataModel(models.Model):
    email = models.EmailField(default="", max_length=100)
    # 其他字段

views.py #

from .models import UserDataModel
from .forms import UserDataForm

def profile(request):
    if request.method == "POST":
        form = UserDataForm(request.POST)
        if form.is_valid():
            cd = form.cleaned_data
            f = UserDataModel(
                email = cd['email'],
                # 其他字段
            )
            f.save()
    else:
        form = UserDataForm()
    return render(request, 'profile.html', {"form": form})

profile.html #

{% if user.is_authenticated %}
<form action="/profile/" method="post" id="questions" class="hide">
   {% csrf_token %}
   {{ form }}
</form>
<script>
    document.querySelector("#id_email").setAttribute("value", "{{user.email}}")
    document.querySelector("#id_email").value = "{{user.email}}"
    document.querySelector("#id_email").style.display = "none"
</script>
{% endif %}

解决方案 #

推荐方案：后端预填充表单（安全可靠） #

问题根源在于前端JS设置值的方式不可靠，且不符合Django表单的设计逻辑。正确做法是在后端初始化表单时直接预填充已登录用户的邮箱，再通过隐藏字段提交：

1. 修改views.py中GET请求的表单初始化逻辑：

else:
    # 已登录用户预填充邮箱
    if request.user.is_authenticated:
        form = UserDataForm(initial={'email': request.user.email})
    else:
        form = UserDataForm()

2. 修改profile.html，将邮箱字段改为隐藏输入框，无需JS：

{% if user.is_authenticated %}
<form action="/profile/" method="post" id="questions" class="hide">
   {% csrf_token %}
   {% for field in form %}
       {% if field.name == 'email' %}
           <input type="hidden" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value }}">
       {% else %}
           {{ field }}
       {% endif %}
   {% endfor %}
</form>
{% endif %}

备选方案：修复前端提交问题（不推荐） #

若坚持使用前端JS，需确保表单提交时邮箱字段值被正确携带。可在表单提交前验证：

document.querySelector('#questions').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    console.log(formData.get('email')); // 确认是否获取到邮箱值
    this.submit();
});

但此方式存在安全风险（前端值可被篡改），且仍可能因浏览器行为导致提交失败，不推荐使用。

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