Django and Bootstrap Modal - django

Question

Please help me to progress with my project. I'm new to Django and bootstrap and i'm currently working on a project. For the Registration of the user i'm using a popup modal.
I've set up the following:
Html file with modal
{% load static %}
<!-- Register Modal Starts -->
<div class="row mt25 tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="col-lg-6 col-xl-6">
<div class="regstr_thumb">
<img class="img-fluid w100" src="{% static 'images/resource/regstr.jpg' %}" alt="regstr.jpg">
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="sign_up_form">
<form action="{% url 'register' %}" method="POST" id="register-form">
{% csrf_token %}
<div class="heading">
<h4>Register</h4>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-block btn-fb"><i class="fa fa-facebook float-left mt5"></i> Login with Facebook</button>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-block btn-googl"><i class="fa fa-google float-left mt5"></i> Login with Google</button>
</div>
</div>
<hr>
<div class="form-group ui_kit_select_search mb0">
<select class="selectpicker" data-live-search="true" data-width="100%">
<option data-tokens="SelectRole">Landlord</option>
<option data-tokens="Agent/Agency">Property Manager</option>
<option data-tokens="SingleUser">Homeowner</option>
</select>
</div>
<div class="form-group input-group">
<p>{{ form.errors.email}}</p>
{{form.email}}
<input type="email" class="form-control" id="exampleInputEmai" placeholder="Email">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-envelope-o"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.password1 }}</p>
{{ form.password1 }}
<input type="password" name="password1" class="form-control" id="exampleInputPassword2" placeholder="Password">
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-password"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.password2 }}</p>
{{ form.password2 }}
<input type="password" name="password2" class="form-control" id="exampleInputPassword3" placeholder="Re-enter password">
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-password"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.country }}</p>
{{ form.country }}
<input type="country" name="country" class="form-control" id="exampleInputCountry" placeholder="Country">
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-country"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.city }}</p>
{{ form.city }}
<input type="city" name="city" class="form-control" id="exampleInputCity" placeholder="City">
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-city"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.phone_number }}</p>
{{ form.phone_number }}
<input type="phone" name="phone_number" class="form-control" id="exampleInputPhone" placeholder="Phone Number">
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-phone"></i></div>
</div>
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="exampleCheck2">
<label class="custom-control-label" for="exampleCheck2">I have read and accept the Terms and Privacy Policy?</label>
</div>
<button type="submit" class="btn btn-log btn-block btn-thm">Sign Up</button>
<p class="text-center">Already have an account? <a class="text-thm" href="#">Log In</a></p>
</form>
</div>
</div>
</div>
The views.py file:
from django.shortcuts import render, redirect
from .forms import UserAdminCreationForm
from django.contrib import messages
def login(request):
return render(request, 'login.html')
def register(request):
form = UserAdminCreationForm()
if request.method == 'POST':
form = UserAdminCreationForm(request.POST)
if form.is_valid():
form.save()
user = form.cleaned_data.get('email')
messages.success(request, 'Account was created for ' + user)
return redirect('index')
return render(request, 'accounts/register.html', {'form': form})
The urls.py file
from django.urls import path, include
from . import views
urlpatterns = [
path('accounts/', include('django.contrib.auth.urls')),
path('register', views.register, name='register'),
path('logout', views.logout, name='logout'),
path('dashboard', views.dashboard, name='dashboard'),
]
The forms.py file:
from django.contrib.auth import get_user_model
from django.contrib.auth.forms import UserCreationForm
from django import forms
class UserAdminCreationForm(UserCreationForm):
"""A Custom form for creating new users."""
email = forms.EmailField(label="", widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Email Address'}), )
password1 = forms.CharField(label="", widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Password'}))
password2 = forms.CharField(label="", widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Repeat Password'}))
country = forms.CharField(label="", max_length=50, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Country'}))
city = forms.CharField(label="", max_length=50, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'City'}))
phone_number = forms.CharField(label="", max_length=20, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Phone Number'}))
class Meta:
model = get_user_model()
fields = ['user_types', 'email', 'password1', 'password2', 'country', 'city', 'phone_number']
When the popup modal with the registration form is opened and click SignUp i have setup a new page accounts/register page just for testing. But i do not want this page, i want to complete the form above and add user in the database. How can i configure that?
My problems that i cannot solve are:
how when i fill in the popup registration (inside the modal) and press SignUp to add user in the database without the accounts/register page?
Please help! Thank you for your time!

Answer 1

change input fields with form.{field name} and add {{ form.errors.{fieldname} }}
here your code:
<!-- Login/Register Starts -->
<!-- Modal -->
<div class="sign_up_modal modal fade" tabindex="-1" role="dialog" aria-hidden="true" id=bd-example-modal-lg>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body container pb20">
<div class="row">
<div class="col-lg-12">
<ul class="sign_up_tab nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Register</a>
</li>
</ul>
</div>
</div>
<!-- Register Modal Starts -->
<div class="row mt25 tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="col-lg-6 col-xl-6">
<div class="regstr_thumb">
<img class="img-fluid w100" src="{% static 'images/resource/regstr.jpg' %}" alt="regstr.jpg">
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="sign_up_form">
<form action="{% url 'register' %}" method="POST" id="register-form">
{% csrf_token %}
{{form.as_p}}
<div class="heading">
<h4>Register</h4>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-block btn-fb"><i class="fa fa-facebook float-left mt5"></i> Login with Facebook</button>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-block btn-googl"><i class="fa fa-google float-left mt5"></i> Login with Google</button>
</div>
</div>
<hr>
<div class="form-group ui_kit_select_search mb0">
<select class="selectpicker" data-live-search="true" data-width="100%">
<option data-tokens="SelectRole">Landlord</option>
<option data-tokens="Agent/Agency">Property Manager</option>
<option data-tokens="SingleUser">Homeowner</option>
</select>
</div>
<div class="form-group input-group">
<p>{{ form.errors.email}}</p>
{{ form.email }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-envelope-o"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.password1 }}</p>
{{ form.password1 }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-password"></i></div>
</div>
</div>
<div class="form-group input-group">
{{ form.password2 }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-password"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.country }}</p>
{{ form.country }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-country"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.errors.city }}</p>
{{ form.city }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-city"></i></div>
</div>
</div>
<div class="form-group input-group">
<p>{{ form.phone_number }}</p>
{{ form.phone_number }}
<div class="input-group-prepend">
<div class="input-group-text"><i class="flaticon-phone"></i></div>
</div>
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="exampleCheck2">
<label class="custom-control-label" for="exampleCheck2">I have read and accept the Terms and Privacy Policy?</label>
</div>
<button type="submit" class="btn btn-log btn-block btn-thm">Sign Up</button>
<p class="text-center">Already have an account? <a class="text-thm" href="#">Log In</a></p>
</form>
</div>
</div>
</div>