title: How to deal with form error message in django?
body: <p>I have a <code>FormView</code> and when I rendering this form as <code>{{ form.as_table }}</code> in my template, it shows error message right under each field like this (only when I type wrong value on each field) :
  <a href="https://i.stack.imgur.com/QcXdC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QcXdC.png" alt="enter image description here"></a>
  (Ignore their arrangement, please)</p>
  
  <p>Since I want to show this form nicely, so I edit my template and add some css on it :</p>
  
  <pre><code>&lt;table id="signup-table"&gt;
      &lt;col width="30%"&gt;
      &lt;col width="70%"&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.username.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.username }}&lt;/td&gt;
          {{ signup_form.errors.username }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.password1.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.password1 }}&lt;/td&gt;
          {{ signup_form.errors.password1 }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.password2.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.password2 }}&lt;/td&gt;
          {{ signup_form.errors.password2 }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.name.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.name }}&lt;/td&gt;
          {{ signup_form.errors.name }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.gender.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.gender }}&lt;/td&gt;
          {{ signup_form.errors.gender }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.birth.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.birth }}&lt;/td&gt;
          {{ signup_form.errors.birth }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.phone_number.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.phone_number }}&lt;/td&gt;
          {{ signup_form.errors.phone_number }}
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;{{ signup_form.job.label_tag }}&lt;/td&gt;
          &lt;td class="value"&gt;{{ signup_form.job }}&lt;/td&gt;
          {{ signup_form.errors.job}}
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And now it shows error messages on the top of the form.</p>
  
  <p><a href="https://i.stack.imgur.com/iKd2S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iKd2S.png" alt="enter image description here"></a>
  In this case, I want to show error message right under each field. How can I do this?</p>
  
  <p>Thanks. </p>
  
  <p><strong>Edit</strong></p>
  
  <p>Chrome  <code>View page source</code> : error is right below each field.</p>
  
  <pre><code>&lt;table id="signup-table"&gt;
      &lt;col width="30%"&gt;
      &lt;col width="70%"&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;&lt;label for="id_username"&gt;아이디:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="value"&gt;&lt;input id="id_username" maxlength="20" name="username" placeholder="알파벳, 숫자만 가능(4~20자)" type="text" value="wrongid" /&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;&lt;label for="id_password1"&gt;비밀번호:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="value"&gt;&lt;input id="id_password1" maxlength="20" name="password1" placeholder="영문,숫자 반드시 포함(6~20자)" type="password" /&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;&lt;label for="id_password2"&gt;비밀번호 확인:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="value"&gt;&lt;input id="id_password2" maxlength="20" name="password2" placeholder="비밀번호 확인" type="password" /&gt;&lt;/td&gt;
          &lt;ul class="errorlist"&gt;&lt;li&gt;비밀번호가 너무 짧습니다. 최소 6 문자를 포함해야 합니다.&lt;/li&gt;&lt;li&gt;패스워드가 너무 일상적인 단어입니다.&lt;/li&gt;&lt;/ul&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;&lt;label for="id_name"&gt;이 름:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="value"&gt;&lt;input id="id_name" maxlength="4" name="name" type="text" /&gt;&lt;/td&gt;
          &lt;ul class="errorlist"&gt;&lt;li&gt;이 항목을 채워주십시오.&lt;/li&gt;&lt;/ul&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label-tag"&gt;&lt;label for="id_gender"&gt;성 별:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="value"&gt;&lt;select id="id_gender" name="gender"&gt;
          .
          .
          .
  </code></pre>
  
  <p>Chrome  <code>inspect</code> :  all errors are top of the form</p>
  
  <p>I don't know why they are different....</p>
  
  <p>(I didn't have any <code>css</code> to <code>errorlist</code>) </p>
  
  <p><a href="https://i.stack.imgur.com/8bzVu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8bzVu.png" alt="enter image description here"></a></p>