How to use Boostrap's client-side validation in django-registraton?

Question

URL: http://twitter.github.com/bootstrap/base-css.html#forms

It says I have to add

<fieldset
class="control-group error">
…
</fieldset>

But where would I add that?

If the password's don't match, if the username is already taken, if the email address is not valid I'd like the input field to display a red border and display an error message to the right (just like in Twitter Boostrap forms page)

Here's my entire registration_form.html template. It has a {{ form }} tag which includes 4 fields by default:

1. Username
2. Email
3. Password
4. Password (again)

registration_base.html simply extends base.html, which contains the base structure of the page.

{% extends "registration/registration_base.html" %}
{% block title %}Register for an account{% endblock %}
{% block content %}

<table>
    <form method='post' action='' class="control-group error" >{% csrf_token %}
        {{ form }}
        <tr><td></td><td><input type="submit" value="Register" /></td>
    </form>
</table>
{% endblock %}

Example:

Answer 1

django-bootstrap is a great library that does this automatically for you. It relies on using a custom Form object that it renders for you. The default form used for the registration process in django-registration is registration.forms.RegistrationFormUniqueEmail. To combine this form with django-bootstrap, you need to define a new class that inherits from both. For example, place this in your forms.py file:

# forms.py
from bootstrap.forms import BootstrapForm
from registration.forms import RegistrationFormUniqueEmail
class RegistrationForm(RegistrationFormUniqueEmail, BootstrapForm):
    pass

Next, you have to tell django-registration to use this new form. The default setup for django-registration is to add this to your urls.py:

# urls.py
(r'^accounts/', include('registration.backends.default.urls')),

But, this uses the default form. To customize, you can specify the URLs explicitly. Copy them from django-registration's default backend urls.py. The default entry for registration looks like this:

# urls.py
from registration.views import register
url(r'^register/$',
    register,
    {'backend': 'registration.backends.default.DefaultBackend'},
    name='registration_register'),

To specify that you want to use the custom form object, the documentation indicates that you can pass a parameter, form_class, like this:

# urls.py
from yourapp.forms import RegistrationForm
from registration.views import register
url(r'^register/$',
    register,
    {'backend': 'registration.backends.default.DefaultBackend'
     'form_class': RegistrationForm},
    name='registration_register'),

You can repeat this process for all of the forms used in django-registration. The resulting registration form looks like this when errors are present: