如何在django中处理表单错误消息?

时间:2016-09-04 00:32:21

标签: css django django-forms

我有一个FormView,当我在我的模板中将此表单呈现为{{ form.as_table }}时,它会在每个字段下方显示错误消息(仅当我在每个字段上输入错误值时): enter image description here (请忽略他们的安排)

由于我想很好地展示这个表单,所以我编辑了我的模板并在其上添加了一些css:

<table id="signup-table">
    <col width="30%">
    <col width="70%">
    <tr>
        <td class="label-tag">{{ signup_form.username.label_tag }}</td>
        <td class="value">{{ signup_form.username }}</td>
        {{ signup_form.errors.username }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.password1.label_tag }}</td>
        <td class="value">{{ signup_form.password1 }}</td>
        {{ signup_form.errors.password1 }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.password2.label_tag }}</td>
        <td class="value">{{ signup_form.password2 }}</td>
        {{ signup_form.errors.password2 }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.name.label_tag }}</td>
        <td class="value">{{ signup_form.name }}</td>
        {{ signup_form.errors.name }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.gender.label_tag }}</td>
        <td class="value">{{ signup_form.gender }}</td>
        {{ signup_form.errors.gender }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.birth.label_tag }}</td>
        <td class="value">{{ signup_form.birth }}</td>
        {{ signup_form.errors.birth }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.phone_number.label_tag }}</td>
        <td class="value">{{ signup_form.phone_number }}</td>
        {{ signup_form.errors.phone_number }}
    </tr>
    <tr>
        <td class="label-tag">{{ signup_form.job.label_tag }}</td>
        <td class="value">{{ signup_form.job }}</td>
        {{ signup_form.errors.job}}
    </tr>
</table>

现在它在表单顶部显示错误消息。

enter image description here 在这种情况下,我想在每个字段下面显示错误消息。我怎么能这样做?

感谢。

修改

Chrome View page source:错误就在每个字段的正下方。

<table id="signup-table">
    <col width="30%">
    <col width="70%">
    <tr>
        <td class="label-tag"><label for="id_username">아이디:</label></td>
        <td class="value"><input id="id_username" maxlength="20" name="username" placeholder="알파벳, 숫자만 가능(4~20자)" type="text" value="wrongid" /></td>

    </tr>
    <tr>
        <td class="label-tag"><label for="id_password1">비밀번호:</label></td>
        <td class="value"><input id="id_password1" maxlength="20" name="password1" placeholder="영문,숫자 반드시 포함(6~20자)" type="password" /></td>

    </tr>
    <tr>
        <td class="label-tag"><label for="id_password2">비밀번호 확인:</label></td>
        <td class="value"><input id="id_password2" maxlength="20" name="password2" placeholder="비밀번호 확인" type="password" /></td>
        <ul class="errorlist"><li>비밀번호가 너무 짧습니다. 최소 6 문자를 포함해야 합니다.</li><li>패스워드가 너무 일상적인 단어입니다.</li></ul>
    </tr>
    <tr>
        <td class="label-tag"><label for="id_name">이 름:</label></td>
        <td class="value"><input id="id_name" maxlength="4" name="name" type="text" /></td>
        <ul class="errorlist"><li>이 항목을 채워주십시오.</li></ul>
    </tr>
    <tr>
        <td class="label-tag"><label for="id_gender">성 별:</label></td>
        <td class="value"><select id="id_gender" name="gender">
        .
        .
        .

Chrome inspect:所有错误都是表单的顶部

我不知道为什么他们不同......

(我没有csserrorlist

enter image description here

1 个答案:

答案 0 :(得分:0)

您直接从表单中调用errors,但您应该从每个表单字段中调用它。

...
<tr>
    <td class="label-tag">{{ signup_form.name.label_tag }}</td>
    <td class="value">{{ signup_form.name }}</td>
    {{ signup_form.name.errors }}
</tr>
<tr>
    <td class="label-tag">{{ signup_form.gender.label_tag }}</td>
    <td class="value">{{ signup_form.gender }}</td>
    {{ signup_form.gender.erros }}
</tr>
<tr>
    <td class="label-tag">{{ signup_form.birth.label_tag }}</td>
    <td class="value">{{ signup_form.birth }}</td>
    {{ signup_form.birth.errors }}
</tr>
...

此外,您还希望在表单顶部添加{{ signup_form.non_field_errors }} docs about errors