Changing class attribute of an element - Django forms

Question

I have registration form and I am using Django-registration. Now, I need to add css class to each field. Also, if there are validation errors, then css class should be different for the fields which have error. How can I achieve this?

class RegistrationForm(forms.Form):
"""
Form for registering a new user account.

Validates that the requested username is not already in use, and
requires the password to be entered twice to catch typos.

Subclasses should feel free to add any additional validation they
need, but should avoid defining a ``save()`` method -- the actual
saving of collected user data is delegated to the active
registration backend.

"""
error_css_class = 'error'
required_css_class='wanted'

email = forms.EmailField(widget=forms.TextInput(attrs=dict(maxlength=75)),
                         label=_("Email address"))
password1 = forms.CharField(widget=forms.PasswordInput(render_value=False),
                            label=_("Password"))
password2 = forms.CharField(widget=forms.PasswordInput(render_value=False),
                            label=_("Password (again)"))

In html template, I am doing

<div class="row">
<label for="id_email"><span>*</span> Email Address:</label>
{{ form.email }}
</div>

Note Eventually, I ended up using widget_tweaks, which allowed me to do

{{form.email|add_class:"blink"|add_error_class:"error"}}

Alasdair · Accepted Answer · 2011-12-21 14:14:35Z

3

You can target form fields without adding a class to each field. Just use CSS rules similar to the following, depending on whether you are rendering the form using as_table (the default for the form's unicode method), as_ul or as_p.

form tr {...}
form li {...}
form p  {...}

For required fields and fields with errors, you can define required_css_class and error_css_class attributes respectively for a form.

class ContactForm(Form):
    error_css_class = 'error'
    required_css_class = 'required'

For more information see the docs for Styling required or erroneous form rows.

If you manually render the form fields in your template, you can access the field's css classes using the css_classes method.

<div class="row {{ form.email.css_classes }}">
<label for="id_email"><span>*</span> Email Address:</label>
{{ form.email }}
</div>

edited Dec 21, 2011 at 14:14

answered Dec 21, 2011 at 12:21

Alasdair

310k59 gold badges605 silver badges534 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Roseman Over a year ago

+1. People seem to forget the cascading part of Cascading Style Sheets.

John Over a year ago

I added both the attributes but it is not working. Fields are defined like email = forms.EmailField(widget=forms.TextInput(attrs=dict(maxlength=75)), label=_("Email address"))

Alasdair Over a year ago

If it's not working, please update your question with your form, your template, and the output you are getting.

Alasdair Over a year ago

Ah, you're rendering the fields by hand in the template. In that case, you can use the bound field's css_classes method. I've updated my answer with an example.

Collectives™ on Stack Overflow

Changing class attribute of an element - Django forms

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related