I'm making a Flask Webapp and I have the following tab content:
<div class="tab-content">
<div class="tab-pane fade in active" id="gable">
{% include 'building_form.html' %}
</div>
<div class="tab-pane fade" id="shed">
{% include 'building_form.html' %}
</div>
<div class="tab-pane fade" id="flat">
{% include 'building_form.html' %}
</div>
</div>
The code for building_form.html is:
<form method="post" action="">
{{ form.hidden_tag() }}
<div class="form-group label-floating">
{{ wtf.form_field(form.width) }}<br>
</div>
<div class="form-group label-floating">
{{ wtf.form_field(form.length) }}<br>
</div>
<div class="form-group label-floating">
{{ wtf.form_field(form.bottom_height) }}<br>
</div>
<div class="form-group label-floating">
{{ wtf.form_field(form.top_height) }}<br>
</div>
{% if ???? %} <!--What put here?-->
<div class="form-group label-floating">
{{ wtf.form_field(form.ridge_height) }}<br>
</div>
{% endif %}
<p><input type=submit value="Calcular"></p>
</form>
I´m only want to render the "form.ridge_height" when id="gable" is active. It is posible to do it using Jinja2?
You could do something like the below, it may not work out of the box though! You can pass variables into includes when they're wrapped using with. You may need to set up another CSS class called hidden if you haven't got one already, which can be done like this:
.hidden {
display: none;
}
{% with gable = True %}
{% include 'building_form.html' %}
{% endwith %}
And then within the building_form:
<div class="form-group label-floating {{ '' if gable == True else 'hidden' }}">
{{ wtf.form_field(form.ridge_height) }}<br>
</div>
Related
I would like to customize the Django login authentication form. The original form looks like this and it works perfectly:
{% extends "blog/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 ">Log In</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
My goal is to modify the form style so that I can place the objects wherever I want. I was able to achieve this for the username and password fields, however I cannot display the error message just like in the original format.
This is what I tried:
{% extends "blog/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 ">Log In</legend>
{% if formset.non_form_errors %}
<div class="alert alert-block alert-danger">
{% if formset_error_title %}<h4 class="alert-heading">{{ formset_error_title }}</h4>{% endif %}
<ul class="m-0">
{{ formset.non_form_errors|unordered_list }}
</ul>
</div>
{% endif %}
<div class="row">
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I saw that crispy uses a object called formset.non_form_errorshowever it looks like it is not working when I insert an invalid username/password.
Would you be able to suggest a smart and elegant way to achieve my goal please? This is what it should look like:
I was able to achieve my goal with this trick:
{% extends "blog/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 ">Log In</legend>
<div class="row">
<!-- Added this new rows -->
{% if form.errors %}
<div class="col-12 register-field">
<div class="alert alert-block alert-danger">
<ul>
<li>Please enter a correct username and password. Note that both fields may be
case-sensitive.
</li>
</ul>
</div>
</div>
{% endif %}
<!-- ------------------- -->
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I check if there are any errors and then I create a div with the custom error message.
I want to hide the field form.name_of_parent_if_minor if the age (CharField) < 18 else show. I am not getting where to write jQuery or JS code or add separate js file. For this do I need to the html definition and add tag for age (CharField) or we can perform action on this as well.
I am new to the Django so if you find any mistakes in my code then any help would be appreciated for guidance.
forms.py
class StudentDetailsForm(forms.ModelForm):
class Meta:
model = StudentDetails
views.py
class StudentCreateView(LoginRequiredMixin, CreateView):
template_name = 'student/student_details_form.html'
model = StudentDetails
form_class = StudentDetailsForm
success_url = "/"
html
{% extends 'student/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div id="idParentAccordian" class="content-section">
<form method="POST">
{% csrf_token %}
<div class="card mt-3">
<div class="card-header">
<a class="collapsed card-link" style="display: block;" data-toggle="collapse"
href="#idPersonalInformation">Personal Information</a>
</div>
<div id="idPersonalInformation" class="collapse show" data-parent="#idParentAccordian">
<div class="card-body">
<div class="row">
<div class="col-6">
{{ form.joining_date|as_crispy_field }}
</div>
<div class="col-6">
{{ form.class|as_crispy_field }}
</div>
</div>
{{ form.student_name|as_crispy_field }}
{{ form.father_name|as_crispy_field }}
{{ form.mother_name|as_crispy_field }}
{{ form.gender|as_crispy_field }}
<div class="row">
<div class="col-6">
{{ form.date_of_birth|as_crispy_field }}
</div>
<div class="col-6">
{{ form.age|as_crispy_field }}
</div>
</div>
<div>
{{ form.name_of_parent_if_minor|as_crispy_field }}
</div>
</div>
</div>
</div>
<div class="form-group mt-3">
<button class="btn btn-outline-info" type="submit">Save</button>
<a class="btn btn-outline-secondary" href="javascript:history.go(-1)">Cancel</a>
</div>
</form>
</div>
{% endblock content %}
the easiest way but not the cleanest is to add JS script in your html
the recommanded way is to add static folder to your app and load static files in your html template using {% load static %}
I have a template page where it's suppose to load a form from the formset if a database query returns FALSE.
<form method="post" class="form">
{% csrf_token %}
{% for form in formset %}
{% if comparelist.item2 %}
<div class="col-3">{{comparelist.item2.name}}</div>
<div class="col-3">{{comparelist.item2.price}}</div>
<div class="col-3">{{comparelist.item2.store}}</div>
{% else %}
<div>
{{form.form-0}}
</div>
{% endif %}
{% if comparelist.item3 %}
<div class="row">
<div class="col-3">{{comparelist.item3.name}}</div>
<div class="col-3">{{comparelist.item3.price}}</div>
<div class="col-3">{{comparelist.item3.store}}</div>
</div>
{% else %}
<div>
{{form.form-1}}
</div>
{% endif %}
{% if comparelist.item4 %}
<div class="row">
<div class="col-3">{{comparelist.item4.name}}</div>
<div class="col-3">{{comparelist.item4.price}}</div>
<div class="col-3">{{comparelist.item4.store}}</div>
</div>
{% else %}
<div>
{{form.form-2}}
</div>
{%endfor%}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But obviously {{form.form-x}} doesn't work.
So how do I insert these forms in manually?
I'm still not entirely sure what the {{form.form-2}} syntax is supposed to do. But I think what you want is to simply refer to the forms directly via their position, just like you do with the comparelist items. So remove the for loop and do that:
<form method="post" class="form">
{% csrf_token %}
{{ formset.management_form }}
{% if comparelist.item2 %}
<div class="col-3">{{comparelist.item2.name}}</div>
<div class="col-3">{{comparelist.item2.price}}</div>
<div class="col-3">{{comparelist.item2.store}}</div>
{% else %}
<div>
{{formset.forms.0}}
</div>
{% endif %}
{% if comparelist.item3 %}
<div class="row">
<div class="col-3">{{comparelist.item3.name}}</div>
<div class="col-3">{{comparelist.item3.price}}</div>
<div class="col-3">{{comparelist.item3.store}}</div>
</div>
{% else %}
<div>
{{formset.forms.1}}
</div>
{% endif %}
{% if comparelist.item4 %}
<div class="row">
<div class="col-3">{{comparelist.item4.name}}</div>
<div class="col-3">{{comparelist.item4.price}}</div>
<div class="col-3">{{comparelist.item4.store}}</div>
</div>
{% else %}
<div>
{{formset.forms.2}}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I have the following django form using crispy-forms:
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">TEAM SELECTION</h2>
</div>
<div class="panel-body">
<form action="" method="post">
{% csrf_token %}
<div>{{ form.non_field_errors }}</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">{{ form.team1|as_crispy_field }}</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">{{ form.team2|as_crispy_field }}</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"><button type="submit" class="btn btn-primary btn-block"; margin-bottom: 2cm;>Submit</button></div>
</form>
</div>
</div>
Everything looks amazing except the {{ form.non_field_errors }} part. It just looks like a bullet list as follows:
You picked the same team!
Does anyone know how I can have make the {{ form.non_field_errors }} look as exciting as the rest of the form?
Try the as_crispy_errors filter:
{% load crispy_forms_tags %}
{{ form|as_crispy_errors }}
I have custom registration form with my own registration view. I've started to using django-allauth recently and I would like to add email confirmation to my registration. Is it possible?
registration view:
def registration(request):
user_creation_form = UserProfileCreationForm(request.POST or None)
if request.method == 'POST':
if user_creation_form.is_valid():
user_creation_form.save()
username = user_creation_form.cleaned_data['username']
password = user_creation_form.cleaned_data['password2']
user = authenticate(username=username, password=password)
login(request, user)
messages.add_message(request, messages.SUCCESS, YOU_HAVE_BEEN_REGISTERED)
return HttpResponseRedirect(reverse('homepage'))
return render(request, 'dolava/accounts/registration.html',
context={'user_creation_form': user_creation_form})
This is how rewrite allauth templates:
in SETTINGS.PY
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
)
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates','allauth'),)
main app templates:
templates/account/password_reset.html (overriden allauth templates)
The problem is that I want to have many fields in registration template like type_of_user, telephone etc.
registration.html:
{% extends 'base.html' %}
{% load static %}
{% block head %}
<script src="{% static "js/registrationToggleFields.js" %}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#id_country').select2();
$('#id_telephone_0').select2();
});
</script>
{% endblock %}
{% block content %}
<div class="col-md-12 text-center">
<h2>Register your account</h2>
<hr class="col-md-12 blackhr no-bottom-margin">
</div>
{# <div class="col-md-12 text-center center-block">#}
<form action="" method="post" class="col-md-6 col-md-offset-3" id="register-form">
{% csrf_token %}
{{ user_creation_form.non_field_errors }}
<div id="form-account-type">
<h3 align="center" class="main-color">Account Type</h3>
<hr>
{# <div class="col-md-12">#}
<div id="type-of-user-field-wrapper" class="fieldWrapper">
<div>
<label for="{{ user_creation_form.type_of_user.id_for_label }}">Type of user:</label>
{% if user_creation_form.type_of_user.field.required %} * {% endif %}
</div>
{{ user_creation_form.type_of_user }}
{{ user_creation_form.type_of_user.errors }}
</div>
<div id="country-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.country.id_for_label }}">Country:</label>
{% if user_creation_form.country.field.required %} * {% endif %}
<br>
{{ user_creation_form.country }}
{{ user_creation_form.country.errors }}
</div>
{# </div>#}
<hr>
</div>
<div id="form-login-credentials" class="form-group-container show-allways">
<h3 align="center" class="main-color">Credentials</h3>
<hr>
<div>
<div id="username-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.username.id_for_label }}">Username:</label>
{% if user_creation_form.username.field.required %} * {% endif %}
<br>
{{ user_creation_form.username }}
{{ user_creation_form.username.errors }}
</div>
<div id="password1-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.password1.id_for_label }}">Password:</label>
{% if user_creation_form.password1.field.required %} * {% endif %}
<br>
{{ user_creation_form.password1 }}
{{ user_creation_form.password1.errors }}
</div>
<div id="password2-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.password2.id_for_label }}">Confirm your password:</label>
{% if user_creation_form.password2.field.required %} * {% endif %}
<br>
{{ user_creation_form.password2 }}
{{ user_creation_form.password2.errors }}
</div>
</div>
<hr>
</div>
<div id="form-personal-information" class="form-group-container show-personal">
<h3 align="center" class="main-color">Personal information</h3>
<hr>
<div>
<div id="first-name-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.first_name.id_for_label }}">First name:</label>
{% if user_creation_form.first_name.field.required %} * {% endif %}
<br>
{{ user_creation_form.first_name }}
{{ user_creation_form.first_name.errors }}
</div>
<div id="last-name-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.last_name.id_for_label }}">Last name:</label>
{% if user_creation_form.last_name.field.required %} * {% endif %}
<br>
{{ user_creation_form.last_name }}
{{ user_creation_form.last_name.errors }}
</div>
</div>
<hr>
</div>
<div id="form-company-information" class="form-group-container show-company-sk show-company">
<h3 align="center" class="main-color">Company information</h3>
<hr>
<div>
<div id="company-name-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.company_name.id_for_label }}">Company name:</label>
{% if user_creation_form.company_name.field.required %} * {% endif %}
<br>
{{ user_creation_form.company_name }}
{{ user_creation_form.company_name.errors }}
</div>
<div id="address-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.address.id_for_label }}">Address:</label>
{% if user_creation_form.address.field.required %} * {% endif %}
<br>
{{ user_creation_form.address }}
{{ user_creation_form.address.errors }}
</div>
</div>
<hr>
</div>
<div id="form-billing-information" class="form-group-container show-company-sk">
<h3 align="center" class="main-color">Billing information</h3>
<hr>
<div>
<div id="ico-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.ICO.id_for_label }}">IČO:</label>
{% if user_creation_form.ICO.field.required %} * {% endif %}
<br>
{{ user_creation_form.ICO }}
{{ user_creation_form.ICO.errors }}
</div>
<div id="dic-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.DIC.id_for_label }}">DIČ:</label>
{% if user_creation_form.DIC.field.required %} * {% endif %}
<br>
{{ user_creation_form.DIC }}
{{ user_creation_form.DIC.errors }}
</div>
</div>
<hr>
</div>
<div id="form-contact-information" class="form-group-container show-allways">
<h3 align="center" class="main-color">Contact information</h3>
<hr>
<div>
<div id="email-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.email.id_for_label }}">Email:</label>
{% if user_creation_form.email.field.required %} * {% endif %}
<br>
{{ user_creation_form.email }}
{{ user_creation_form.email.errors }}
</div>
<div id="telephone-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.telephone.id_for_label }}">Telephone:</label>
{% if user_creation_form.telephone.field.required %} * {% endif %}
<br>
{{ user_creation_form.telephone }}
{{ user_creation_form.telephone.errors }}
</div>
<div id="fax-field-wrapper" class="fieldWrapper">
<label for="{{ user_creation_form.fax.id_for_label }}">Fax:</label>
{% if user_creation_form.fax.field.required %} * {% endif %}
<br>
{{ user_creation_form.fax }}
{{ user_creation_form.fax.errors }}
</div>
</div>
</div>
<div class=" clearfix top-margin">
<button class="btn btn-success center-block" style="width:100%; padding: 15px 0;" type="submit">
Register
</button>
</div>
</form>
{# </div>#}
{% endblock %}
Do you have any advices?
You have to override one class and then supply all required variables to thhe specific template. The view that returns confirmation_email is ConfirmEmailView of allauth/account/views.py override this class, pass all the required variables from view to the template and then override your template account/email_confirm to show required data.