I'll post both entire form elements even though it might not all be needed to answer the question.
Both buttons are at very end of this code snippet.
I haven't been able to successfully add any row divs, etc. since a form is ending in the middle of the div, and another beginning, it doesn't seem to work.
Any advice?
Thank you.
<div class="row content-section col-md-10">
<form method="POST" action="">
{{ form.csrf_token() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">
{% if sales_order_number %}
<h3>Sales Order Number: {{ sales_order_number }}</h3>
{% else %}
<h3>?? No Sales Order Number ??</h3>
{% endif %}
{% if total_controllers_configured %}
<h3>Total Controllers Configured for this job: {{ total_controllers_configured }} / {{ sales_order_controller_quantity }} </h3>
{% else %}
<h3> Total Controllers Configured for this job: 0 / {{ sales_order_controller_quantity }} </h3>
{% endif %}
<br>
Configure Controller {{ current_controller }} Below:
</legend>
<!-- Fan Quantity and Modbus Ranges -->
<div class="row">
<div class="form-group col-md-8">
{{ form.modbus_ranges.label(class="form-control-label") }}
{% if form.modbus_ranges.errors %}
{{ form.modbus_ranges(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.modbus_ranges.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.modbus_ranges(class="form-control form-control-lg", id="modbus-ranges") }}
{% endif %}
</div>
<div class="form-group col-md-4">
{{ form.fan_quantity.label(class="form-control-label") }}
{% if form.fan_quantity.errors %}
{{ form.fan_quantity(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.fan_quantity.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.fan_quantity(class="form-control form-control-lg" , id="fan-quantity") }}
{% endif %}
</div>
</div>
<!-- fan type, controller type, serial number -->
<div class="row">
<div class="form-group col-md-6">
{{ form.controller_type.label(class="form-control-label") }}
{% if form.controller_type.errors %}
{{ form.controller_type(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.controller_type.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.controller_type(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group col-md-6">
{{ form.controller_serial_number.label(class="form-control-label") }}
{% if form.controller_serial_number.errors %}
{{ form.controller_serial_number(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.controller_serial_number.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.controller_serial_number(class="form-control form-control-lg") }}
{% endif %}
</div>
</div>
<div class="form-check">
{{ form.gfa_fire_NC(class="form-check-input") }}
{{ form.gfa_fire_NC.label(class="form-check-label") }}
</div>
<div class="form-group text-left col-md-6">
{{ form.save_configuration(class="btn btn-outline-info") }}
</div>
</fieldset>
</form>
<form action="" method="POST" novalidate>
{{ form.csrf_token() }}
<div class="form-group text-right col-md-6">
<input type='submit' class="btn btn-outline-danger" name='clear_configuration' value="Clear Configuration"></input>
<!-- {{ form.clear_configuration(class="btn btn-outline-danger", required=False) }} -->
</div>
</form>
Related
While "DataRequired" and "NumberRange" produce a pop-up error message, "EqualTo" (and my own custom "MoreThan") do not. How can I get them to also produce a pop-up message?
####################################################################
My form has three fields. "min_nFeatures" has to be lower than "max_nFeatures", so I changed the code of the "EqualTo" validator to "MoreThan" (as advised in Code a validator for a WTForms form which compares the inputs from two fields). The validator is working: if the user enters a larger value for "min_nFeatures", it does not go through (it returns to the same page). However, there is no pop-up message as with the other built-in validators (for example, if the user does not enter anything, there's a pop-up "Please fill out this field"). I would like the same behavior for the custom validator.
My code:
class MoreThan(object):
def __init__(self, fieldname, message=None):
self.fieldname = fieldname
self.message = message
def __call__(self, form, field):
try:
other = form[self.fieldname]
except KeyError:
raise ValidationError(field.gettext("Invalid field name '%s'.") % self.fieldname)
if field.data <= other.data:
d = {
'other_label': hasattr(other, 'label') and other.label.text or self.fieldname,
'other_name': self.fieldname
}
message = self.message
if message is None:
message = field.gettext(
'The maximal number of expressed genes has to be larger than the minimal number of expressed genes')
raise ValidationError(message)
class vln_plot_form(FlaskForm):
min_nFeatures = IntegerField('* Minimal number of expressed genes:', validators=[DataRequired()])
max_nFeatures = IntegerField('* Maximal number of expressed genes:',
validators=[DataRequired(), MoreThan('min_nFeatures')])
max_mtpercent = IntegerField('Maximal percent of mitochondrial gene expression:', validators=[NumberRange(1, 100)])
submit = SubmitField('Submit')
view:
#app.route('/vln', methods=['POST', 'GET'])
def violin_plots():
...
form = vln_plot_form()
if request.method == 'POST':
if form.validate_on_submit():
...
return redirect(url_for('next_page'))
return render_template('violin_plots.html', form=form)
I read Message not flashing on some WTForm validation methods but could not apply it to my case.
########################################################################
edit:
Here's my HTML code:
{% extends 'base.html' %}
{% block head %}
<title>HELLO</title>
{% endblock %}
{% block body %}
<center><h1>Run!</h1></center>
<h2>Step 2/3</h2>
<figure>
<img src={{ vln_plot_file }} align="middle" alt="vln_plot" style="width:70%">
</figure>
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="form-horizontal">
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.min_nFeatures.label }}</label>
{{ form.min_nFeatures }}
</div>
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.max_nFeatures.label }}</label>
{{ form.max_nFeatures }}
</div>
{% if with_mt %}
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.max_mtpercent.label }}</label>
{{ form.max_mtpercent }}
</div>
{% endif %}
<div class="form-group">
{{ form.csrf_token() }}
{{ form.submit(class="btn btn-primary")}}
</div>
</div>
{% if form.errors %}
{{ form.errors }}
{% endif %}
</form>
{% endblock %}
Since I added "{{ form.errors }}" at the end of the HTML, I do see the correct form.errors at the bottom of the webpage, but this is of course a very ugly way to display the errors...
This should do the trick:
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="form-horizontal">
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.min_nFeatures.label }}</label>
{{ form.min_nFeatures }}
{% for error in form.min_nFeatures.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.max_nFeatures.label }}</label>
{{ form.max_nFeatures }}
{% for error in form.max_nFeatures.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
{% if with_mt %}
<div class="form-group col-md-6">
{{ form.csrf_token() }}
<label for=""> {{ form.max_mtpercent.label }}</label>
{{ form.max_mtpercent }}
{% for error in form.max_mtpercent.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
{% endif %}
<div class="form-group">
{{ form.csrf_token() }}
{{ form.submit(class="btn btn-primary")}}
</div>
</div>
</form
Note how I manage the display of errors for each of the fields individually.
I have been working on a website for the past while using flask, python and bootstrap. I added footer to my website and I would like a "contact me" form in the footer. Below is my current code for creating a contact form and displaying this form.
class ContactForm(FlaskForm):
email = StringField("", validators=[DataRequired(), Email()])
content = TextAreaField("", validators=[DataRequired(), length(min=2, max=500)])
submit = SubmitField("Submit")
<form method="POST" action="">
<div class="form-group">
{{ form.email.label(class="form-control-label") }}
{% if form.email.errors %}
{{ form.email(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.email.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.email(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ form.content.label(class="form-control-label") }}
{% if form.content.errors %}
{{ form.content(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.content.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.content(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</div>
</form>
I created this footer in my "layout.html" file which is the base file that all other html documents extend from so that all pages will have this same footer.
The issue is that then I need to create and instance of this form object on every page of my application and handle the validate_on_submit on every page. (Sample code below)
#app.route("/random_page", methods=["GET", "POST"])
def random_page():
form = ContactForm()
if form.validate_on_submit():
# code to send the email goes here
return render_template("random_page")
I am looking for an easier way to do this so that I don't need to repeat code on every page and so that It can be considerably simpler. I am not very experienced with flask and would highly appreciate the help.
Use the #app.context_processor decorator, documentation to inject an instance of your contact form into the template context for all templates. For example:
#app.context_processor
def inject():
return dict(
contact_form=ContactForm(),
)
Then re-write the form's HTML to use the contact_form template variable, also adding in an appropriate action route.
<form method="POST" action="{{url_for('contact')}}">
<div class="form-group">
{{ contact_form.email.label(class="form-control-label") }}
{% if contact_form.email.errors %}
{{ contact_form.email(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.email.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ contact_form.email(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ contact_form.content.label(class="form-control-label") }}
{% if contact_form.content.errors %}
{{ contact_form.content(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in contact_form.content.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ contact_form.content(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ contact_form.submit(class="btn btn-outline-info") }}
</div>
</form>
Then add a route to solely handle this form's postback:
#app.route("/contact", methods=["POST"])
def contact():
form = ContactForm()
if form.validate_on_submit():
# code to send the email goes here
# blah blah
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% for post in posts %}
<div class="post-preview">
<a href="{{ url_for('post', post_id=post.id) }}">
<h2 class="post-title">
{{ post.title }}
</h2>
<h3 class="post-subtitle">
{{ post.subtitle }}
</h3>
</a>
<p class="post-meta">Posted by {{ post.author }} on {{ post.date_posted.strftime('%B %d, %Y') }}</p>
</div>
{% if post == posts[-1] %}
<br />
{% else %}
<hr />
{% endif %}
{% endfor %}
Im making a web application on flask and this is the snippet of my code to the articles template I have a sqlite database that contains the articles, how can I make an if statement that detects if the post is the last in the loop since im making an hr per article but not on the last one
{% if post == posts[-1] %} doesn't seem to work.
By Default Flask uses jinja2 as default Template Engine[1] and that's what you're using. Jinja2 provides loop.last variable[2] that you can use as follows:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% for post in posts %}
<div class="post-preview">
<a href="{{ url_for('post', post_id=post.id) }}">
<h2 class="post-title">
{{ post.title }}
</h2>
<h3 class="post-subtitle">
{{ post.subtitle }}
</h3>
</a>
<p class="post-meta">Posted by {{ post.author }} on {{ post.date_posted.strftime('%B %d, %Y') }}</p>
</div>
{% if loop.last %}
<br />
{% else %}
<hr />
{% endif %}
{% endfor %}
I have a problem on a custom widget for a RadioField Wtforms used inside a Flask app.
The custom widget is rendered well, but it DOES NOT WORK because it does not set the "checked" on the field after choosing it. If instead I use the default widget everything is fine and it works.
I also tried another more standard way, that is the "real" custom widget called inside the form class definition ... but I have the exact same result.
Below is the code, any suggestions? Thanks :-)
#### ROUTE
bp = Blueprint('auth', __name__, url_prefix='/auth')
#bp.route('/generic_crud', methods=('GET', 'POST'))
#login_required
def generic_crud():
form = forms.BaseGenericForm()
if form.validate_on_submit():
# Insert the msg
models.BaseGenericFormTable.add_record( title_select = form.titleSelect.data,
title_radio = form.titleRadio.data,
title_checkbox = form.titleCheckbox.data )
return render_template('sample_wtforms/success.html')
return render_template('sample_wtforms/crud_generic.html', form=form)
#### FORM
class BaseGenericForm(FlaskForm):
titleSelect = SelectField( 'Title Select',
validators=[DataRequired(message='Title Select missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Corrupt Politician'),
('cop', 'No-nonsense City Cop'),
('rocket', 'Professional Rocket League Player'),
('lonely', 'Lonely Guy At A Diner'),
('pokemon', 'Pokemon Trainer')],
render_kw={"class":"custom-select"}
)
titleRadio = RadioField('Title Radio',
validators=[DataRequired(message='Title RadioBox missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Politician'),
('cop', 'No-nonsense Cop'),
('lonely', 'Lonely Guy'),
('pokemon', 'Trainer')]
)
titleCheckbox = RadioField('Title Checkbox',
validators=[DataRequired(message='Title CheckBox missed')],
choices=[ ('farmer' , 'Farmer'),
('politician', 'Politician'),
('cop', 'No-nonsense Cop'),
('lonely', 'Lonely Guy'),
('pokemon', 'Trainer')]
)
submit = SubmitField( 'Submit',
render_kw={"class":"btn btn-primary"}
)
#### TEMPLATE jinja2
{% block content %}
<form method="POST" class="container">
<!-- titleSelect -->
<div class="form-group row">
{{ form.titleSelect.label(class='col-4 col-form-label') }}
<div class="col-8">
{{ form.titleSelect }}
{% if form.titleSelect.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleSelect.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<!-- titleRadio -->
<div class="form-group row">
{{ form.titleRadio.label(class='col-4 col-form-label') }}
<div class="col-8">
{#{{ form.titleRadio }}#}
{% for value, label, selected in form.titleRadio.iter_choices() %}
<div class="custom-control custom-radio custom-control-inline">
<input id="radio{{ loop.index0 }}" name="titleRadio" type="radio" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}>
<label for="radio{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
</div>
{% endfor %}
{% if form.titleRadio.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleRadio.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<!-- titleCheckbox ################################################ -->
<div class="form-group row">
{{ form.titleCheckbox.label(class='col-4 col-form-label') }}
<div class="col-8">
{#{{ form.titleCheckbox }}#}
{% for value, label, selected in form.titleCheckbox.iter_choices() %}
<div class="custom-control custom-checkbox custom-control-inline">
<input id="checkbox{{ loop.index0 }}" name="checkbox" type="checkbox" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}>
<label for="checkbox{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
</div>
{% endfor %}
{% if form.titleCheckbox.errors %}
<div class="alert alert-danger" role="alert">
<ul class="errors">
{% for error in form.titleCheckbox.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
{{ form.csrf_token }}
<div class="form-group row">
<div class="offset-4 col-8">
{{ form.submit }}
</div>
</div>
</form>
{% endblock %}
For a custom widget I do:
<div id="{{ field.id }}">
{{ field.label(class="form-label") }}<br>
{% for subfield in field %}
<div class="form-check form-check-inline">
<input {% if subfield.checked %}checked {% endif %}type="radio" class="form-check-input" id="{{ subfield.id }}" name="{{ field.id }}" value="{{ subfield.id[-1] }}">
{{ subfield.label(class="form-check-label") }}
</div>
{% endfor %}
</div>
The relevant part for you should be "{% if subfield.checked %}checked {% endif %}"
I have a django for loop that is supposed to add items inside a form element. However, when the code executes, django just puts the first element inside the form and puts the following element outside the form html tag.
The code is:
<form action="." method="post" class="basket_summary" id="basket_formset">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
{% with line=form.instance product=form.instance.product %}
{% purchase_info_for_line request line as session %}
<div class="row no-margin cart-item">
{{ form.id }}
<div class="col-xs-12 col-sm-2 no-margin">
{% with image=product.primary_image %}
{% thumbnail image.original "100x100" upscale=True as thumb %}
<a href="{{ product.get_absolute_url }}" class="thumb-holder">
<img class="lazy" alt="" src="{{ thumb.url }}" />
</a>
{% endthumbnail %}
{% endwith %}
</div> <!-- /.thumbnail holder -->
<div class="col-xs-12 col-sm-5 ">
<div class="title">
{{ line.description }}
</div>
{% trans "Update" %}
{% if user.is_authenticated %}
| {% trans "Save for later" %}
{% endif %}
<div style="display:none">
{{ form.save_for_later }}
{{ form.DELETE }}
</div>
{% for field_errors in form.errors.values %}
{% for error in field_errors %}
<span class="error-block"><i class="icon-exclamation-sign"></i> {{ error }}</span>
{% endfor %}
{% endfor %}
</div> <!-- /.Title holder -->
<div class="col-xs-12 col-sm-3 no-margin">
<div class="quantity">
<div class="le-quantity">
<form>
<a class="minus" href="#reduce"></a>
<input name="form-0-quantity" id="id_form-0-quantity" readonly="readonly" type="text" value="{{ form.quantity.value }}" />
<a class="plus" href="#add"></a>
</form>
</div>
</div>
</div><!-- /.Quantity Holder -->
<div class="col-xs-12 col-sm-2 no-margin">
<div class="price">
{% if line.is_tax_known %}
{{ line.unit_price_incl_tax|currency:line.price_currency }}
{% else %}
{{ line.unit_price_excl_tax|currency:line.price_currency }}
{% endif %}
</div>
</div> <!-- /.Price Holder -->
</div><!-- /.cart-item -->
{% endwith %}
{% endfor %}</form>
What I expect is that django should have multiple <div class="row no-margin cart-item"> items in the form tag but that isn't happening.
How do I fix this?
Looks like you are missing closing form tag </form> at the end.
EDIT: as others mentioned in comments it could be because you have forms inside form. This will result in unpredictable behavior.