代码之家  ›  专栏  ›  技术社区  ›  Lorenzo SC

使用django crispy表单自定义非表单错误

  •  1
  • Lorenzo SC  · 技术社区  · 10 年前

    我想定制django crispy显示非表单错误的方式。我知道如何更改文本,但我不知道在哪里更改css。

    My login area

    forms.py

    class LoginForm(forms.Form):
        alphanumeric = RegexValidator(r'^[0-9a-zA-Z]*$', 'Only alphanumeric characters are allowed.')
        username = forms.CharField(label='', required=True, widget=forms.TextInput(attrs={'placeholder': 'Username'}))
        password = forms.CharField(label='', required=True, widget=forms.PasswordInput(attrs={'placeholder': 'Password'}))
        name = forms.CharField(label='', 
                            required=True ,  
                            validators=[alphanumeric], 
                            widget=forms.TextInput(attrs={'placeholder': 'Name'}))
    
    
        def clean(self):
            username = self.cleaned_data.get('username')
            password = self.cleaned_data.get('password')
            user = authenticate(username=username, password=password)
            if not user or not user.is_active:
                raise forms.ValidationError('Invalid Login : I want to change this CSS')
            return self.cleaned_data
    
        def login(self, request):
            username = self.cleaned_data.get('username')
            password = self.cleaned_data.get('password')
            user = authenticate(username=username, password=password)
            return user
    

    模板-html

    <form method="POST" action="">{% csrf_token %}
        <!--{% if  form.non_field_errors %}
            testing
        {% endif %}-->
        {{form|crispy}}
        <div class="form-info">
            <label class="hvr-sweep-to-right">
                <input class="create btn"  type="submit" value="Submit">
            </label>
        </div>
    </form>
    
    1 回复  |  直到 10 年前
        1
  •  0
  •   Kroenig    10 年前

    我假设您使用的是带有bootstrap的crispy表单(取决于图像中的样式)。

    所以你可以 覆盖 原始引导类

    .alert {
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;
    }
    
    .alert-danger {
      background-color: #f2dede;
      border-color: #ebcccc;
      color: #a94442;
    }
    
    .alert-danger hr {
      border-top-color: #e4b9b9;
    }
    
    .alert-danger .alert-link {
      color: #843534;
    }
    

    或其他警报类别,例如警报成功。

    如果您不想在整个项目中覆盖这些类,只需在crispy表单周围设置一个div

    <div class"crispyform">
      {{form|crispy}}
    </div>
    

    并在自定义css中编写s.th.like

    .crispyform .alert {
      # your new style
    }