I have a Django form where one of the fields is defined as:
widgets = {
'name': forms.CheckboxSelectMultiple()
}
The template renders them in a loop with:
{% for field in form %}
<fieldset class="article-form__field">
{{ field.label_tag }} {{ field }}
</fieldset>
{% endfor %}
This is rendered as:
<fieldset class="article-form__field">
<label for="category-name_0">Category:</label>
<ul id="category-name">
<li><label for="category-name_0"><input id="category-name_0" name="category-name" type="checkbox" value="GEN" /> General information</label></li>
<li><label for="category-name_1"><input id="category-name_1" name="category-name" type="checkbox" value="FOO" /> Food and drinks</label></li>
</ul>
</fieldset>
In short: <label><input></label>. However, I would like the output to be <label></label><input>.
Is that possible, and if so, how?
Full code is here.
{% for field in form %}
<fieldset class="article-form__field">
{% if field.name != "category-name" %}
{{ field.label_tag }} {{ field }}
{% else %}
{{ field.label_tag }}
<ul id={{ field.auto_id }}>
{% for checkbox in field %}
<li>
<label for="{{ checkbox.id_for_label }}">
{{ checkbox.choice_label }}
</label>
{{ checkbox.tag }}
</li>
{% endfor %}
</ul>
{% endif %}
</fieldset>
{% endfor %}
CheckboxSelectMultiple
RadioSelect (how to customize rendering is described here)
Related
{% extends 'halls/base.html' %}
{% block content %}
<div class="container">
<h2>Add Video to {{hall.title}}</h2>
<form method="post">
{% csrf_token %}
{% load widget_tweaks %}
{% for field in form %}
<div class="form-group {% if field.errors %} alert alert-danger {% endif %}">
{{ field.errors }}
{{ field.label_tag }}
{% render_field field class='form-control' %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary"> Add</button>
</form>
<br>
<h2>OR</h2>
<form>
{% for field in search_form %}
<div class="form-group ">
{{ field.errors }}
{{ field.label_tag }}
{% render_field field class='form-control' %}
</div>
{% endfor %}
</form>
<div id="search_results"></div>
<script type="text/javascript">
var delayTimer;
$("#id_search_term").keyup(function (){
clearTimeout(delayTimer);
$('#search_results').text('Loadingggg');
});
</script>
</div>
{% endblock %}
this is the HTML code. SO basically the whole idea here is when I inspect the search_form, it should give the id of the input box as "id_search_term". But when I inspect the box, it gives as id="id_search".
I am not able to find a way to reference the input box with the ID in the script tag
I have two forms login.html and register.html, and i follow the same methods for displaying errors in templates, but does not work.
login.html
<form method="post" action="" class="ui large form">
{% csrf_token %}
<div class="ui stacked segment">
{% if not form.non_field_errors %}
<div class="required field">
<label>Emailaddress</label>
{{ form.username }}
</div>
{% endif %}
{% if form.non_field_errors %}
<div class="required field error">
<label>Emailaddress</label>
{{ form.username }}
</div>
{% endif %}
{% if not form.non_field_errors %}
<div class="required field">
<label>Password</label>
{{ form.password }}
</div>
{% endif %}
{% if form.non_field_errors %}
<div class="required field error">
<label>Password</label>
{{ form.password }}
</div>
{% endif %}
<small><p>{{ form.non_field_errors }}</p></small>
<input type="submit" name="" class="ui fluid large teal submit button" value="login">
</div>
</form>
Output screenshots:
Non Error output
Error output
register.html
<form method="post" action="" class="ui large form">
{% csrf_token %}
<div class="ui stacked segment">
{% if not form.non_field_errors %}
<div class="required field">
<label>Emailaddress</label>
{{ form.email }}
</div>
{% endif %}
{% if form.non_field_errors %}
<div class="required field error">
<label>Emailaddress</label>
{{ form.email }}
<p>{{ form.email.errors }}</p>
</div>
{% endif %}
{% if not form.non_field_errors %}
<div class="required field">
<label>Password</label>
{{ form.password1 }}
</div>
{% endif %}
{% if form.non_field_errors %}
<div class="required field error">
<label>Password</label>
{{ form.password1 }}
<p>{{ form.password1.errors }}</p>
</div>
{% endif %}
{% if not form.non_field_errors %}
<div class="required field">
<label>Confirm Password</label>
{{ form.password2 }}
</div>
{% endif %}
{% if form.non_field_errors %}
<div class="required field error">
<label>Confirm Password</label>
{{ form.password2 }}
<p>{{ form.password2.errors }}</p>
</div>
{% endif %}
<small><p>{{ form.non_field_errors }}</p></small>
<input type="submit" name="" class="ui fluid large teal submit button" value="Sign Up">
</div>
</form>
This time i don't get any error messages displayed. What am i doing wrong?
non_field_errors(), as their name implies, show errors not associated with a field (docs).
Note that any errors raised by your Form.clean() override will not be associated with any field in particular. They go into a special “field” (called all), which you can access via the non_field_errors() method if you need to.
You shouldn't be using it as logic for whether a specific field has an error. You should be doing this:
{% if not form.email.errors %}
<div class="required field">
<label>Emailaddress</label>
{{ form.email }}
</div>
{% endif %}
and then in your login.html, you're not rendering {{ field.errors }} like you do in register.html:
{% if form.non_field_errors %}
<div class="required field error">
<label>Emailaddress</label>
{{ form.username }}
{# This is missing #}
<p>{{ form.username.errors }}</p>
</div>
{% endif %}
If I have a django form, where I want it to provide a bootstrap error input (<input type="text" id="inputError">) to show an error instead of the bullet-list {{ form.title.error }}, how would I go about doing this? Right now I have:
{% if UF.title.errors %}
{{ UF.title }}
{{ UF.title.errors.as_text }}
{% else %}
{{ UF.title }}
{% endif %}
but instead of having UF.title in the first error, I would rather have UF.title but with the ERROR> how would I go about doing this?
You should use django-bootstrap3.
It does exactly what you want.
{% load bootstrap3 %}
{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
Here's what I do for my code:
<div class="form-group {% if form.username.errors %}has-error{% endif %}">
{{ form.username }}
{% if form.username.errors %}
<span class="help-block">{{ form.username.errors.0 }}</span>
{% endif %}
</div>
And my forms.py looks like:
from django import forms
class LoginForm(forms.Form):
username = forms.CharField(label='Username', max_length=32, widget=forms.TextInput(attrs={'placeholder': 'Username', 'class': 'form-control'}))
I am using Django Allauth for user flow in my project. I have successfully created my own set of templates which inherit from the standard Allauth templates and they work 95%. For some reason, however, I do not receive an error for an invalid login.
If I enter 'test#email' for the user I get a 'Please enter a valid email address' error but if I enter a proper email with an incorrect password it simply reloads the page but with no errors as to what went wrong. I've included my template below which has the {{ form.login.errors }} and {{ form.password.errors }} tags.
All guidance is appreciated, thank you.
Template:
<div id="search_container">
<div id="search_box_content">
{% block page_content %}
<h4>Login</h4>
<form class="" id="user-form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<h1> {{ form.login.errors }}</h1>
<h1> {{ form.password.errors }}</h1>
<div class="input_class">
<label for="login">Username: </label>
{{ form.login }}
</div>
<div class="input_class">
<label for="password">Password: </label>
{{ form.password }}
</div>
<div class="input_class" id="forgot_pass">
<label for="remember">
Remember Me? </label>
{{ form.remember }}
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<div id="modal_bottom_bar">
<a class="button secondaryAction" id="forgot_pass" href="{% url 'account_reset_password' %}">Forgot your Password?</a>
<button class="primaryAction" id="login_submit" type="submit">Login</button></div>
</form>
{% endblock %}
</div>
</div>
Some errors are non field errors such as those errors which are raised for some custom validation and are not included in field.errors rather they are in form.non_field_errors:
So better use this snippet to show all errors which belongs to fields and to custom validation if you are rendering your form manually:
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-error">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<div class="alert alert-error">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endif %}
i wonder how i can add some extra html to a certain field in a template in Django
I have the following form (forms.py)
first_name = forms.CharField(widget=forms.TextInput(attrs={'required': 'required'}))
last_name = forms.CharField(widget=forms.TextInput(attrs={'required': 'required'}))
street = forms.CharField(widget=forms.TextInput(attrs={'required': 'required'}))
In my template i get the fields with:
<form action="" method="post">{% csrf_token %}
{% for field in form %}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
</div>
{% endfor %}
<input type="submit" value="Submit" />
</form>
Now i want to add some extra html to the street field like this
<form action="" method="post">{% csrf_token %}
{% for field in form %}
{% if field.type =='street' %}
<div class="fieldWrapper otherclass">
<hr>
{% else %}
<div class="fieldWrapper">
{% endif %}
{{ field.errors }}
{{ field.label_tag }} {{ field }}
</div>
{% endfor %}
<input type="submit" value="Submit" />
</form>
The whole thing fails:
Could not parse the remainder: '=='street'' from '=='street''
Template operators require a space before and after so replace
{% if field.type =='street' %}
with
{% if field.type == 'street' %}
or use the ifequal templatetag
{% ifequal field.type 'street' %}
Hello world.
{% else %}
Apocalypse
{% endifequal %}