使用 Twitter Bootstrap 设置 Django 错误样式答案

【问题标题】：Django Error Styling with Twitter Bootstrap使用 Twitter Bootstrap 设置 Django 错误样式
【发布时间】：2019-04-08 09:16:40
【问题描述】：

我正在尝试在我的 Django 项目中使用 twitter bootstrap 设置错误样式。现在，我有一个简单的表单，它询问一个人的电子邮件地址，让他们按下一个按钮，然后将其提交到数据库。它还具有验证检查以查看电子邮件在数据库中是否唯一。如果它不是唯一的，则会引发错误，提示“此电子邮件已注册”。但是，当出现错误时，对于重复的电子邮件，它会在输入字段旁边显示一个丑陋的项目符号列表，其中包含文本 This email is already registered。我正在尝试将其设置为在输入文本下显示一个带有黄色i 图标的小对话框的位置，就像输入不包含@ 符号时那样，即它不是电子邮件。当电子邮件中不包含有效域时，也会出现丑陋的要点，例如没有附加.com。

我认为问题在于我的表单 html 的设置方式，或者视图如何处理表单的错误。也许，因为表单字段是一个 EmailField，is_valid 指示器没有验证，因此会显示 twitter 引导警报。

如何让它每次都显示警报？以下是我的代码：

构成 index.html 的一部分

        <form class="form-inline" method="post">
          <div class="input-group input-group-newsletter">
            <div class="form-group">
              {% csrf_token %}
              {{ form }}
            </div>
            <div class="form-group">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="submit">Button Text</button>
              </div>
            </div>
          </div>
        </form>

views.py

from django.shortcuts import render, HttpResponse
from django.views.generic import TemplateView

from appname.forms import AppForm


class AppView(TemplateView):
    template_name = 'apps/index.html'

    def get(self, request):
        form = AppForm()
        return render(request, self.template_name, {'form': form})

    def post(self, request):
        form = AppForm(request.POST)
        if form.is_valid():
            email = form.cleaned_data['email']
            form.save()
            form = AppForm()
            args = {'form': form, 'email': email, 'signedup': True}
        else:
            args = {'form': form, 'signedup': False}
        return render(request, self.template_name, args)

forms.py

from django import forms
from .models import AppModel


class AppForm(forms.ModelForm):
    email = forms.EmailField(required=True,
                             label='',
                             widget=forms.EmailInput(attrs={'class': 'form-control',
                                                                           'placeholder': 'Enter email...',
                                                                           'name': 'email',
                                                                           'aria-label': 'Enter email...',
                                                                           'aria-describedby': 'basic-addon'}))

    class Meta:
        model = AppModel
        fields = ('email',)

    def clean_email(self, *args, **kwargs):
        email = self.cleaned_data.get("email")
        if AppModel.objects.filter(email__iexact=email).exists():
            raise forms.ValidationError("This email is already registered.")
        return email

【问题讨论】：

这是 Django 处理错误的形式。检查this。
问题不在于错误没有显示。问题是该错误没有像其他错误一样使用 twitter bootstrap 创建警报。

标签： django twitter-bootstrap validation error-handling django-forms

【解决方案1】：

您可能想尝试 Django 消息框架。这个网站展示了它是如何完成的。我自己试过了，效果很好，虽然我还没有试过把图标放进去。

https://simpleisbetterthancomplex.com/tips/2016/09/06/django-tip-14-messages-framework.html

根据以下评论更新：

这是我项目中的sn-ps

在 settings.py

中

from django.contrib.messages import constants as messages
...
MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

messages.html 模板，可包含在您想要通知的任何模板中

{% if messages %}
    {% for message in messages %}
        <div class="alert {{ message.tags }} alert-dismissible " role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

log-in.html模板

<body>
{% include 'trip_monitor/messages.html' %}
<div class="login-form">
    <form method="post">
        {% csrf_token %}
        <h2 class="text-center">Materials Management</h2>
        <p align="center">Please <strong>log in</strong> to continue.</p>

        <div class="form-group">
            <input name="username" type="text" class="form-control" placeholder="Username" required="required" autofocus>
        </div>
        <div class="form-group">
            <input  name="password" type="password" class="form-control" placeholder="Password" required="required" id="password">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Log in</button>
        </div>
    </form>
</div>
</body>

views.py

from django.contrib import messages

def login(request):
    if request.method == 'POST':
        _username = request.POST['username']
        _password = request.POST['password']
        user = authenticate(request, username=_username, password=_password)
        if user is not None:
            auth_login(request, user)
            return redirect('/trip/')
        else:
            messages.error(request, 'Username or Password is incorrect!')  # this will be shown as pop-up message
            return render(request, 'trip_monitor/login.html')
    elif request.method == 'GET':
        if request.user.is_authenticated:
            return redirect('/trip/')
        else:
            return render(request, 'trip_monitor/login.html')

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。
@Selcuk，更新了我的答案，不知道是否存在上述指南。