Adding a class 'is-invalid' to input form in Django

Question

How to add bootstrap class is-invalid to Django input forms (only if the form/field is not correctly completed).

My forms.py

class BasicUserDataForm(forms.Form):
    error_css_class = 'is-invalid'
    user_name = forms.CharField(max_length=20, widget=forms.TextInput(attrs={'placeholder': 'Username',
                                                                             'class': 'form-control'}))

My templates.html

<div class="form-group col-md-6">
  <!-- Label -->
  <label for="id_user_name">Username*</label>
  <div class="input-group mb-0">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    {{ form.user_name }}
  </div>
  {% if form.user_name.errors|striptags %}<small class="text-danger"><b>{{ form.user_name.errors|striptags }}</b></small>{% endif %}
</div>

I try:

1.)

class BasicUserDataForm(forms.Form):
    user_name = forms.CharField(max_length=20, widget=forms.TextInput(attrs={'placeholder': 'Username',
                                                                             'class': 'form-control'}))

2.)

class BasicUserDataForm(forms.Form):
    user_name = forms.CharField(max_length=20, widget=forms.TextInput(attrs={'placeholder': 'Username',
                                                                             'class': 'form-control {% if form.user_name.errors %}is-invalid{% endif %}'}))

3.) According to the documentation

class BasicUserDataForm(forms.Form):
    error_css_class = 'is-invalid'
    [...]

4.)

.error input, .error select {
    border: 2px red solid;
}

It still doesn't give any results. I would like to get the effect that gives:

user_name = forms.CharField(max_length=20, widget=forms.TextInput(attrs={'placeholder': 'Username',
                                                                             'class': 'form-control is-invalid'}))

You should be able to it with your third method. Are you sure you're model is loading your custom form and not the default one? — Hutch, May 15 '20 at 15:58
Thank you for your answer. My field intemplate.html looks like in my question. I added nothing more. We have something like that in the documentation: `Sender:` It seems to me that this adds a class not to but somewhere above. What I don't have. — Maddie Graham, May 15 '20 at 16:05
Hello @MaddieGraham check this answer this will help you https://stackoverflow.com/a/53108023/16705219 — Ankit Tiwari, Aug 22 '21 at 19:02

score 2 · Answer 1 · 2022-01-22T01:24:03.487

Create a file, yourapp_template-filters.py
and then place it in templatetags folder in your app:

from django import template
register = template.Library()


@register.filter(name='add_attr')
def add_attribute(field, css):
    attrs = {}
    definition = css.split(',')

    for d in definition:
        if ':' not in d:
            attrs['class'] = d
        else:
            key, val = d.split(':')
            attrs[key] = val

    return field.as_widget(attrs=attrs)

To use it in a Django template, firstly add this widget in the top of the template, similar to the load static widget:
{% load yourapp_template-filters %}
And now you can use it on any form widget as a function, like so:

{% if form.user_name.errors %}
     {{ form.user_name|add_attr:"form-control is-invalid" }}
{% else %}
     {{form.user_name|add_attr:"form-control"}}
{% endif %}

score 1 · Answer 2 · answered Jan 23 '22 at 20:33

@ehsan nnnnn's answer is great! I tried it, and it works.

I want to clarify and extend it a little bit.

Initialization:

Source: https://docs.djangoproject.com/en/4.0/howto/custom-template-tags/

The app should contain a templatetags directory, at the same level as models.py, views.py, etc. Do not forget to add init.py in the directory! (as stated in the doc)

Attribute declaration:

The code provided by @ehsan nnnnn is helpful if you completely override the attributes section. I have based my code entirely on @ehsan nnnnn's solution and extended it to preserve the previous attributes.

NOTE: I am using Python 3.10.1; if you are somehow still using a version before f-string or do not like f-strings, correct it to whatever your heart desires.

Here is my solution:

# templatetags\add_attr.py
from django import template
register = template.Library()


@register.filter(name='add_attr')
def add_attribute(field, css):
    attrs = field.subwidgets[0].data['attrs']  # Accessing the already declared attributes
    definition = css.split(',')

    for d in definition:
        if ':' not in d:
            attrs['class'] += f" {d}"  # Extending the class string
        else:
            key, val = d.split(':')
            attrs[key] += f'{val}'  # Extending the `key` string

    return field.as_widget(attrs=attrs)

{% comment %} HTML template {% endcomment %}
{% if form.username.errors %}
    {{form.username|add_attr:'is-invalid'}}
{% else %}
    {{ form.username }}
{% endif %}

Tested on:

Python 3.10.1
Django 4.0
Bootstrap 5.1

score 0 · Answer 3 · answered May 15 '20 at 16:25

Try adding a Meta class to your form and assigning the proper model. For instance:

class BasicUserDataForm(forms.Form):
  error_css_class = 'is-invalid'
  user_name = forms.CharField(max_length=20, widget=forms.TextInput(attrs={'placeholder': 'Username', 'class': 'form-control'})) 

  class Meta:
    model = User

Adding a class 'is-invalid' to input form in Django

3 Answers3

Initialization:

Attribute declaration:

Tested on: