使用id_<字段名>绑定Django表单时默认验证错误不显示如何解决

根因 #

手动硬编码表单输入元素，未在模板中渲染Django表单实例携带的校验错误信息，因此即使视图已经生成了错误对象，也只会在后台打印，前端无法展示。同时当前输入框id与label的for属性不匹配，点击label无法正常聚焦到对应输入框。

修复步骤 #

修改HTML模板 #

每个表单字段后添加错误信息渲染逻辑，同时修正输入框id、保留用户已输入的内容避免提交失败后重填，完整修改后代码如下：

<form method="POST" class="register-form" id="register-form" enctype="multipart/form-data" >
 {% csrf_token %}
 <!-- 可选：添加表单全局错误提示 -->
 {% if user_form.non_field_errors %}
 <div class="alert alert-danger">
   {% for error in user_form.non_field_errors %}
   <p>{{ error }}</p>
   {% endfor %}
 </div>
 {% endif %}
 {% if profile_form.non_field_errors %}
 <div class="alert alert-danger">
   {% for error in profile_form.non_field_errors %}
   <p>{{ error }}</p>
   {% endfor %}
 </div>
 {% endif %}

  <div class="form-group">
       <label for="id_username"><i class="zmdi zmdi-account material-icons-name"></i></label>
       <input type="text" name="username" id="id_username" placeholder="Username" value="{{ user_form.username.value|default:'' }}"/>
       <!-- 用户名字段错误提示 -->
       {% if user_form.username.errors %}
       <div class="text-danger">
         {% for error in user_form.username.errors %}
         <span>{{ error }}</span>
         {% endfor %}
       </div>
       {% endif %}
  </div>
                   
  <div class="form-group">
       <label for="id_email"><i class="zmdi zmdi-email"></i></label>
       <input type="email" name="email" id="id_email" placeholder="Your Email" value="{{ user_form.email.value|default:'' }}"/>
       <!-- 邮箱字段错误提示 -->
       {% if user_form.email.errors %}
       <div class="text-danger">
         {% for error in user_form.email.errors %}
         <span>{{ error }}</span>
         {% endfor %}
       </div>
       {% endif %}
  </div>                  
   
  <div class="form-group">       
       <label for="id_password"><i class="zmdi zmdi-lock"></i></label>
       <input type="password" name="password" id="id_password" placeholder="Password"/>
       <!-- 密码字段错误提示 -->
       {% if user_form.password.errors %}
       <div class="text-danger">
         {% for error in user_form.password.errors %}
         <span>{{ error }}</span>
         {% endfor %}
       </div>
       {% endif %}
  </div>
                    
  <div class="form-group">
       <input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
       <label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in  <a href="#" class="term-service">Terms of service</a></label>
       <!-- 若同意条款为profile_form必填字段，移除注释开启下方错误提示 -->
       {% comment %}
       {% if profile_form.agree_term.errors %}
       <div class="text-danger">
         {% for error in profile_form.agree_term.errors %}
         <span>{{ error }}</span>
         {% endfor %}
       </div>
       {% endif %}
       {% endcomment %}
 </div>
 
 <div class="form-group form-button">
       <input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
 </div>
 </form>

代码中的text-danger为Bootstrap默认错误样式类，可根据项目实际样式规则替换为对应类名。

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