I'm using Django 3.0.2 + Boostrap. I have created a registration/login.html page. The contents of this page are shown below.
The page renders correctly and most of it works OK. However, I am unable to login to my website through this page. I keep getting Your username and password did not match. Please try again. I can login to the admin website without any issues if I use the same username/password. I am not sure what is wrong with my login.html. Any ideas?
{% extends "base.html" %}
{% block content %}
{% if form.errors %}
<p>Your username and password did not match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account does nohave access to this page. To proceed,please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form class="user" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control form-control-user" id="exampleInputUserName" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
</div>
<input type="submit" class="btn btn-primary btn-user btn-block" value="Login">
<input type="hidden" name="next" value="{{ next }}">
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Contents of views.py:
from django.contrib.auth import logout
def logout_view(request):
"""Log out user from the website."""
logout(request)
Your input types are missing the name attribute. As per the Mozilla docs:
A string specifying a name for the input control. This name is
submitted along with the control's value when the form data is
submitted.
So the name is submitted with the form. But what if there is no name attribute?
Same Documentation explains:
Consider the name a required attribute (even though it's not). If an
input has no name specified, or name is empty, the input's value is
not submitted with the form.
So your username and password are not sent to the backend.
You need to provide the name attributes to your input types.
<form class="user" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control form-control-user" id="exampleInputUserName" placeholder="Username" `name="username"`>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password" name="password">
</div>
<input type="submit" class="btn btn-primary btn-user btn-block" value="Login">
<input type="hidden" name="next" value="{{ next }}">
</form>
It is front-end issue, not particularly related to Django.
I have an input in my form which I try to label in Russian, for example:
email = forms.CharField(label='ййй')
The problem occurs when the label contains only non-English characters, the label simply disappears.
Interestingly enough, when the label contains at least one English character, the label will appear, for example:
email = forms.CharField(label='йййa')
Works correctly.
The same problem occurs with attributes in the widget parameter
email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'ййй'}))
This the template HTML code:
{% load widget_tweaks %}
<h2>Sign up</h2>
<form method="post">
{% csrf_token %}
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
{% for field in form.visible_fields %}
<div class="form-group">
{{ field.label_tag }}
{% if form.is_bound %}
{% if field.errors %}
{% render_field field class="form-control is-invalid" %}
{% for error in field.errors %}
<div class="invalid-feedback">
{{ error }}
</div>
{% endfor %}
{% else %}
{% render_field field class="form-control is-valid" %}
{% endif %}
{% else %}
{% if field.name == 'birth_date' %}
{% render_field field class="form-control date" id="date" name="date" %}
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% endif %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text }}</small>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This is the output html code:
<h2>Sign up</h2>
<form method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='Q2EvMWMCPrV597OQV8aqJwtC4X1zuSQI9oVdjeZtgzQUYTAYSp5v22cz2zfOZgwn' />
<div class="form-group">
<input type="text" name="email" autofocus required class="form-control" id="id_email" />
</div>
<div class="form-group">
<label for="id_id_num">Id number:</label>
<input type="text" name="id_num" id="id_id_num" required class="form-control" maxlength="9" />
</div>
<div class="form-group">
<label for="id_password1">Password:</label>
<input type="password" name="password1" required class="form-control" id="id_password1" />
<small class="form-text text-muted"><ul><li>Your password can't be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can't be a commonly used password.</li><li>Your password can't be entirely numeric.</li></ul></small>
</div>
<div class="form-group">
<label for="id_password2">Password confirmation:</label>
<input type="password" name="password2" required class="form-control" id="id_password2" />
<small class="form-text text-muted">Enter the same password as before, for verification.</small>
</div>
<div class="form-group">
<label for="id_first_name">First name:</label>
<input type="text" name="first_name" id="id_first_name" required class="form-control" maxlength="30" />
</div>
<div class="form-group">
<label for="id_last_name">Last name:</label>
<input type="text" name="last_name" id="id_last_name" required class="form-control" maxlength="30" />
</div>
<div class="form-group">
<label for="id_birth_date">Birth date:</label>
<input type="text" name="birth_date" required id="date" name="date" class="form-control date" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Found a solution, simply add "u" before the string to make it unicode
email = forms.CharField(label=u'ййй')
So, I've been racking my brain on this for 2 days now. Any help would be awesome!
At the heart of my issue, I believe, is that I have nested modals and a custom bootstrap form in both: the first for login, and the second for signup. Let's assume in one case I want to do all my validations server-side, and possibly get full control over each of the error validation messages, as well as how and where they should appear respective to their input. How do I do that using django.contrib.messages?
** If I could use some of Bootstrap 4's built-in methods for validation as a first line of defense, or data-validate-on-blur to work like how it does with Zurb Foundation's Abide, even better.
Template tags in each base.html modal:
{% if messages %}
<div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
Trials and tribulations thus far:
As it stands, and with the various work-arounds I've found on Stack Overflow, i.e. using jQuery to toggle the modal (not the prettiest as it reloads the page), the best I've been able to do still bleeds my messages in between modals and/or my redirect views.
I've read threads on how to clear Django messages, and thought that might be a fix, so if after I close a modal or open a new modal, the messages essentially are cleared out until the form is submitted once again. In other words, the login error messages are unique to the login modal when its form's submit button is pressed, and signup error messages are unique to the signup modal when its form's submit button is pressed.
Unfortunately, I haven't figured out how to use a view (views.py), to successfully achieve this. The thought comes to mind that since because I'm using modals to trigger that event, I would have to use jQuery for that, but I have failed on that front also. I'm really hoping there is a more straight-forward solution to this.
Thanks in advance,
Dev
PS - my snippets:
views.py
def signup(request):
signup_errors = User.objects.validation(request.POST, 'register')
if len(signup_errors):
for error in signup_errors.values():
messages.error(request, error)
return redirect('/')
else:
new_user = User.objects.create(
first_name = request.POST['first_name'],
last_name = request.POST['last_name'],
dob = request.POST['dob'],
phone = request.POST['phone'],
address = request.POST['address'],
city = request.POST['city'],
state = request.POST['state'],
zipcode = request.POST['zipcode'],
email = request.POST['email'],
password =
bcrypt.hashpw(request.POST['password'].encode(), bcrypt.gensalt()))
request.session['first_name'] = new_user.first_name
request.session['id'] = new_user.id
messages.info(request, 'You have successfully submitted your
information.')
return redirect('/menu')
def login(request):
login_errors = User.objects.validation(request.POST, 'login')
if len(login_errors):
for error in login_errors.values():
messages.error(request, error)
return redirect('/')
else:
current_user = User.objects.get(email=request.POST['email'])
request.session['first_name'] = current_user.first_name
request.session['id'] = current_user.id
messages.info(request, 'You have successfully logged in.')
return redirect('/menu')
models.py
class UserManager(models.Manager):
def validation(self, postData, error_validation):
errors = {}
if error_validation == 'register':
if not NAME_REGEX.match(postData['first_name']):
errors['first_name'] = "First name can only contain
letters!"
if len(postData['last_name']) < 1:
errors['last_name'] = "Last name cannot be blank."
if not NAME_REGEX.match(postData['last_name']):
errors['last_name'] = "Last name can only contain letters!"
if error_validation == 'login':
user = User.objects.filter(email=postData['email'])
if not user:
errors['user_login'] = "No account with that email in
our system."
elif not bcrypt.checkpw(postData['password'].encode(),
user[0].password.encode()):
errors['password_login'] = "Invalid email and/or
password!"
return errors
login modal in base.html
<div class="modal fade text-dark" id="loginModal">
<div class="modal-dialog">
<div class="modal-content font-paytone">
<div class="modal-header shadow p-3 bg_primary rounded">
<h5 class="modal-title font-poller text-light text_shadow_success2" id="loginModal">Login <i class="fa fa-user text-center ml-1"></i></h5>
<button class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<form id="login-form" action="{% url 'ecommerce_app:login' %}" method="POST" novalidate>
{% csrf_token %}
<div class="form-group">
<input type="email" name="email" class="form-control form-control-lg" placeholder="Email" required>
</div>
<div class="form-group">
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<input id="login-form-submit-btn" type="submit" class="btn btn-success btn-block border bg_primary btn_login" value="Log In">
</form>
<p class="pt-2 font-passion">Don't have an account? Sign up below!</p>
<button id="login-form-signup-btn" class="btn btn-info btn-block border" data-toggle="modal" data-target="#registerModal">Sign Up</button>
</div>
{% if messages %}
<div class="modal-footer">
<div class='container-fluid bg-white'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
register modal in base.html
<div class="modal fade text-dark" id="registerModal">
<div class="modal-dialog">
<div class="modal-content font-paytone">
<div class="modal-header shadow p-3 bg_primary rounded">
<h5 class="modal-title font-poller text-light text_shadow_info" id="registerModal">Sign Me Up! <i class="fa fa-user-plus ml-1"></i></h5>
<button class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<form id='signup-form' action="/signup/" method="POST" novalidate>
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input type="text" name="first_name" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="dob">Date of Birth</label>
<input type="date" name="dob" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="phone">Phone #</label>
<input type="tel" name="phone" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" name="address" class="form-control" placeholder="Street" required>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" name="city" placeholder="City" required>
</div>
<div class="col">
<input type="text" class="form-control" name="state" placeholder="State" required>
</div>
<div class="col">
<input type="text" pattern="[0-9]{5}" name="zipcode" class="form-control" placeholder="Zip" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<!-- <label for="password">Password</label> -->
<input type="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group col-md-6">
<!-- <label for="confirm">Confirm Password</label> -->
<input type="password" name="confirm" class="form-control" placeholder="Confirm Password" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block font-fredoka">Register</button>
{% if messages %}
<div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</form>
</div>
</div>
</div>
PSS - if I can help to clarify anything else please let me know
Well, I think I solved my own problem and am somehow compelled to share with others the solution as I think I actually lost sleep over this one. Anyway, I'm not really sure if this is what Django message class 'extra_tags' attribute was originally intended for, but for all intents and purposes it is a clean fix and allows me control over both server-side and client validation messages.
First, I assign extra_tags to 'register' and 'login' respectively when I create and append each message instance:
views.py
def signup(request):
errors = User.objects.validation(request.POST, 'register')
if len(errors):
for error in errors.values():
messages.add_message(request, messages.ERROR, error, extra_tags="register")
return redirect('/')
def login(request):
errors = User.objects.validation(request.POST, 'login')
if len(errors):
for error in errors.values():
messages.add_message(request, messages.ERROR, error, extra_tags="login")
return redirect('/')
I check to see if there are messages, then iterate through them, checking if the tag is 'register' (or 'login'), and if so, render some text, if not, don't render anything.
base.html
{% if messages %}
{% for message in messages %}
{% if 'register' in message.tags %}
<p class="small font-poller text-danger registration_error_message">{{ message }}</p>
{% endif %}
{% endfor %}
{% endif %}
Last but not least, after you submit the form through either modal, you will need to reload the modal with the aforementioned error (or success) messages. To have each modal show its respective messages you will have to differentiate and then toggle to open each one the same way I did using template_tags in the base.html, only this time using a little jQuery:
<script>
$(document).ready(function() {
{% if messages %}
{% for message in messages %}
{% if 'login' in message.tags %}
$('#loginModal').modal('toggle');
{% elif 'register' in message.tags %}
$('#registerModal').modal('toggle');
{% endif %}
{% endfor %}
{% endif %}
});
</script>
I'm trying to show error message in my custom signup template. Just to verify my below codes work, I used the {{ form.as_table }} and it shows error message properly. However, when I use my custom signup template, it doesn't show any error message when I cause an error on purpose on the signup form.
HTML
<form class="form-signin" method="POST">
{% csrf_token %}
<div class="container">
<div class="jumbotron">
<a class="navbar-brand js-scroll-trigger" href="{% url 'boutique:index' %}"><img width="165" height="30" src="{% static 'boutique/img/modvisor_logo_black.png' %}"></a>
<br><br>
<div class="text-center mb-4">
<h1 class="h3 mb-3 font-weight-normal">Join Modvisor</h1>
<p class="error-message">
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
{% endif %}
</p>
</div>
<div class="form-label-group">
<input type="text" id="inputEmail" class="form-control" name="username" placeholder="Email address" required autofocus>
<label for="inputEmail">Email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword1" class="form-control" name="password1" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword2" class="form-control" name="password2" placeholder="Password" required>
<label for="inputPassword">Confirm Password</label>
</div>
<!--
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" name="password2" placeholder="Password" required>
<label for="inputPassword">Confirm Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
-->
<button class="btn btn-success btn-block" type="submit">Sign Up</button>
<br>
<button class="btn btn-secondary btn-block" type="button">Back</button>
<p class="mt-5 mb-3 text-muted text-center">© 2018 Modvisor All Rights Reserved.</p></p>
</div>
</div>
</form>
forms.py
class SignupForm(UserCreationForm):
class Meta(UserCreationForm.Meta):
fields = UserCreationForm.Meta.fields
views.py
def signup(request):
if request.method == 'POST':
form = SignupForm(request.POST)
if form.is_valid():
form.save()
return redirect(settings.LOGIN_URL)
else:
form = SignupForm()
return render(request, 'accounts/register.html', {'form': form})
You should use form.errors.field_name for errors related to specific field. Like for error on username field, it will be form.errors.username
You HTML will look like
<div class='error'>{{form.errors.username}}</div>
<div class="form-label-group">
<input type="text" id="inputEmail" class="form-control" name="username" placeholder="Email address" required autofocus>
<label for="inputEmail">Email</label>
</div>
I created the form, but i can not submit it using post method. I worked with generic views
When i try to submit it,this link appeares '?csrfmiddlewaretoken=4u6glHHJVueXItlN...'
here's my code:
form template:
<form action="" method="post" class="form-inline">
{% csrf_token %}
<div class="modal-body clearfix">
{% include 'words/word_form.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
generic view:
class Create_Word(generic.CreateView):
model=Word
fields=['name','translation']
template_name = "words/list_all.html"
Here's word_form template:
{%load extra%}
{% for field in form %}
<div class="form-group ">
<div class="col-sm-10">
<span class="text-danger-small">{{ field.errors }}</span>
</div>
<label class="control-label col-sm-2 m-l-1 ">{{ field.label_tag }}</label>
<div class= "col-sm-9 m-b-1">
{{ field | addcss:"form-control" }}
</div>
{% endfor %}