Reputation: 61

Django Crispy_Form unable to render in HTML

I have been following the docs/videos online and can't seem to get my Form to render, I would be happy if someone could explain me what I am doing wrong: My goal is to get the Form to render

Here is my Code:

views.py

I handled both cases according to request type and didn't leave the else block empty. Defined the form, didn't forget the redirect

from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import UserRegisterForm


def register(request):
    if request.method == 'POST':
        form = UserRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            messages.success(request, f'Account created for {username}!')
            return redirect('')
    else:
        form = UserRegisterForm()
    return render(request, 'register.html', {'form': form})

forms.py

Defined a form from the existing Django Forms and included all the necessary fields

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm


class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

register.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Join Today</legend>
            {{ form |crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">Sign Up</button>
        </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Already Have An Account? <a class="ml-2" href="#">Sign In</a>
        </small>
    </div>
</div>
{% endblock content %}

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Q&A Learning Center {% block title %}{% endblock %}</title>
</head>
<body>
<div></div>
<header>
    <!-- NavBar -->
    {% include 'partials/_navbar.html' %}
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>
</header>

</body>
</html>

main application urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('pages.urls')),
    path('admin/', admin.site.urls),
]

pages\urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('about/', views.about, name='about'),
    path('register/', views.register, name='register'),
]

pages\views.py

def register(request):
    return render(request, 'users/register.html')

settings.py

INSTALLED_APPS = [
    'users.apps.UsersConfig',
    'crispy_forms',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_mysql',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

The result I get on the site

Tried on Chrome and Firefox

Upvotes: 2

Answers (3)

Comm4nd0

Reputation: 671

Correct the line in your form meta class from this:

fields = ['username', 'email', 'password1', 'password2']

To this:

fields = ('username', 'email', 'password1', 'password2')

Upvotes: 0

coffeemesh

Reputation: 61

I have managed to get the Form to render. I am not exactly sure what specifically was the solution but what I changed is ; I've put the register.urls in the main urls file as a stand-alone app with its own urls, and properly routed to the register.html then it worked. Also changed the base.html I think there was also an error on where I displayed the site content

here is the updated code:

myApp.urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('pages.urls')),
    path('', include('users.urls')),
    path('admin/', admin.site.urls),
]

users.urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('register/', views.register, name='register'),
]

users.views.py

from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import UserRegisterForm


def register(request):
    if request.method == 'POST':
        form = UserRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index/')
    else:
        form = UserRegisterForm()
    return render(request, 'users/register.html', {
        'form': form
    })

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Q&A Learning Center</title>
</head>
<body>
<nav>
    {% include 'partials/_navbar.html' %}
</nav>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

users.templates.users.register.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-8">
        <div class="card">
            <div class="card-body">
                <h2>Sign Up</h2>
                <form method="post">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button type="submit" class="btn btn-primary">Sign up</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Upvotes: 0

Jeanpierre Rivas

Reputation: 282

Apparently you have a small space.

Change this.

{{ form |crispy }}

For this.

{{ form|crispy }}

Upvotes: 1

Django Crispy_Form unable to render in HTML

Answers (3)

Related Questions