Adding css class to field on validation error in django

Question

I am using Django's modelform and its really good. How can I highlight the actual text box (e.g. border:red ) if there is a validation error associated with it. Basically what i want is to add a class (error) if there is a validation error to a field.

How are you generating the form html in template? Printing the whole form object at once or printing field by field? — Imran, Jan 31 '11 at 06:42
I am looping through form elements and printing errors, field and label separately. — Myth, Jan 31 '11 at 07:24

score 18 · Accepted Answer · answered Jan 31 '11 at 11:57

18

What about defining error_css_class? http://docs.djangoproject.com/en/dev/ref/forms/api/#styling-required-or-erroneous-form-rows?

class MyForm(ModelForm):
    error_css_class = 'error'

answered Jan 31 '11 at 11:57

errx

1,761
4
18
25

9

This gives class to container of the form field. What if I want to assign class to form field itself? – Myth Feb 02 '11 at 04:44
1

use custom form template in this case – errx Feb 03 '11 at 00:08
2

@Myth: $('.error').find(':input').css('background-color', 'pink'); – Alex Feb 20 '13 at 22:08

score 10 · Answer 2 · answered Nov 01 '18 at 19:21

To answer the original question.

You can add the desired class to the field in the view to where you are submitting your form and doing your form.is_valid() check. Not the prettiest but it will work.

def submit_form(request):
    if request.method = 'POST':
        if. form.is_valid():
            # Do something with clean form data
            pass
        else:
            # Append css class to every field that contains errors.
            for field in form.errors:
                form[field].field.widget.attrs['class'] += ' my-css-class'
    return render(request, submit_form.html, {
        'form': form
    })

Or to encapsulate this process you can override form.is_invalid() and put this `for field in form.errors:` loop in it — Am Ben, Oct 09 '22 at 21:47

score 3 · Answer 3 · answered Apr 11 '14 at 14:49

3

Expanding upon errx's answer.

Add the CSS

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

to specifically highlight the field

answered Apr 11 '14 at 14:49

Augier

311
2
13

score 1 · Answer 4 · answered Apr 10 '17 at 03:35

1

Try this?

self.fields['field_you_want_to_add_error'].widget.attrs['class'] = "error"

answered Apr 10 '17 at 03:35

wood

29
2

score 1 · Answer 5 · answered Apr 03 '20 at 03:43

1

template :

<div style="color:red">{{ userForm.short_description.errors.as_text  }}</div>

answered Apr 03 '20 at 03:43

Mohd Ahshan Danish

125
1
8

Adding css class to field on validation error in django

5 Answers5

Linked