How to create macro to clean up WTForm error checking? - flask

Is there a better way to set a 'has-error' class within my form fields? I am using Flask and WTForms. The below code works but is very repetitive. I tried to set a dynamic variable such as {% set field + 'error' = 'has-error' %} but found out you cannot set dynamic variables in jinja.
<form action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
{% if login_user_form.email.errors %}
{% set email_error = 'has-error' %}
{% endif %}
{% if login_user_form.password.errors %}
{% set password_error = 'has-error' %}
{% endif %}
<div class="form-group {{ email_error }}">
{{ login_user_form.email(class='form-control input-lg', placeholder='Email', required='true') }}
{% if login_user_form.email.errors %}
{% for error in login_user_form.email.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% endif %}
</div> <!-- / Email -->
<div class="form-group signin-password {{ password_error }}">
{{ login_user_form.password(class='form-control input-lg', placeholder='Password', required='true') }}
{% if login_user_form.password.errors %}
{% for error in login_user_form.password.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% endif %}
</div> <!-- / Password -->
<div class="form-actions">
<input type="submit" value="Log In" class="btn btn-primary btn-block btn-lg">
</div> <!-- / .form-actions -->
</form>

Related

Django templates Could not parse the remainder

I have this template, I am looping through all choices in a question, and I want to default check the question user previously selected. selected_choice variable is coming from my view and I got have it ok in my template.
{% extends 'base.html' %}
{% block content %}
<div id="detail" class="">
<form hx-post="{% url 'main:vote' question.id %}" hx-trigger="submit" hx-target="#detail" hx-swap="outerHTML">
{% csrf_token %}
<fieldset>
<legend><h1>{{ question.question_text }}</h1></legend>
{% if error_message %}<p>
<strong>{{ error_message }}</strong>
</p>
{% endif %}
{% for choice in question.choices.all %}
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" {% if selected_choice and choice.id==selected_choice %}checked{% endif %}>
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
{% endfor %}
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
{% endblock content %}
I get this error
Could not parse the remainder: '==selected_choice' from 'choice.id==selected_choice'

Flask WTForms - how to skip validation on fields in invisible div?

I have created a WTform in Python Flask, where I have a delivery form. If customer's billing address is different from delivery address then i am enabling div which contains fields for billing address. I am doing hiding and showing of div via jquery.
Originally i had all the fields in one Flaskform, but then i thought if i put billing fields in separate FlaskForm, and handle form.validate_on_submit() separately for 2nd form then may be i can skip validation for fields in Billing div.
But no, it is still performing validation on those fields, and because of that I am not able to move forward. If user has same addresses then billing fields will be empty and can't pass validation.
I am sure people must have encountered this situation but i can't find any answer regarding this.
Could someone guide me?
I am attaching code, to explain myself.
My Forms.py
class DeliveryForm(FlaskForm):
choices_billadd = [('1', 'Use delivery address'), ('2', 'Add a billing address')]
addressline1 = StringField('Address Line 1*',
validators=[DataRequired(), Length(min=1, max=100)])
addressline2 = StringField('Address Line 2',
validators=[Length(max=100)])
city = StringField('City*',
validators=[DataRequired(), Length(min=2, max=50)])
postcode = StringField('Postcode*',
validators=[DataRequired(), Length(min=2, max=50)])
billingaddress = SelectField('Billing Address*', choices = choices_billadd, validators = [DataRequired()])
submit = SubmitField('Submit')
class BillingForm(FlaskForm):
bill_addressline1 = StringField('Address Line 1*',
validators=[DataRequired(), Length(min=1, max=100)])
bill_addressline2 = StringField('Address Line 2',
validators=[Length(max=100)])
bill_city = StringField('City*',
validators=[DataRequired(), Length(min=2, max=50)])
bill_postcode = StringField('Postcode*',
validators=[DataRequired(), Length(min=2, max=50)])
<form method="POST" action="">
{{ form.csrf_token(id='login_csrf') }}
<fieldset class="form-group content-section">
<div class="row pt-3">
<div class="col-6">
{{ form.addressline1.label(class="form-control-label") }}
{% if form.addressline1.errors %}
{{ form.addressline1(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form.addressline1.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.addressline1(class="form-control") }}
{% endif %}
</div>
<div class="col-6">
{{ form.addressline2.label(class="form-control-label") }}
{% if form.addressline2.errors %}
{{ form.addressline2(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form.addressline2.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.addressline2(class="form-control") }}
{% endif %}
</div>
</div>
<div class="row pt-3">
<div class="col-6">
{{ form.city.label(class="form-control-label") }}
{% if form.city.errors %}
{{ form.city(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form.city.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.city(class="form-control") }}
{% endif %}
</div>
<div class="col-6">
{{ form.postcode.label(class="form-control-label") }}
{% if form.postcode.errors %}
{{ form.postcode(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form.postcode.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.postcode(class="form-control") }}
{% endif %}
</div>
</div>
<div class="row pt-3">
<div class="col-12">
{{ form.billingaddress.label(class="form-control-label") }}
{{ form.billingaddress(class="form-control") }}
</div>
</div>
<div id="div_billingaddress" class="">
<div class="row pt-3">
<div class="col-6">
{{ form_bill.bill_addressline1.label(class="form-control-label") }}
{% if form_bill.bill_addressline1.errors %}
{{ form_bill.bill_addressline1(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form_bill.bill_addressline1.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form_bill.bill_addressline1(class="form-control") }}
{% endif %}
</div>
<div class="col-6">
{{ form_bill.bill_addressline2.label(class="form-control-label") }}
{% if form_bill.bill_addressline2.errors %}
{{ form_bill.bill_addressline2(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form_bill.bill_addressline2.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form_bill.bill_addressline2(class="form-control") }}
{% endif %}
</div>
</div>
<div class="row pt-3">
<div class="col-6">
{{ form_bill.bill_city.label(class="form-control-label") }}
{% if form_bill.bill_city.errors %}
{{ form_bill.bill_city(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form_bill.bill_city.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form_bill.bill_city(class="form-control") }}
{% endif %}
</div>
<div class="col-6">
{{ form_bill.bill_postcode.label(class="form-control-label") }}
{% if form_bill.bill_postcode.errors %}
{{ form_bill.bill_postcode(class="form-control is-invalid") }}
<div class="invalid-feedback">
{% for error in form_bill.bill_postcode.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form_bill.bill_postcode(class="form-control") }}
{% endif %}
</div>
</div>
</div>
</fieldset>
<div class="row py-4">
<div class="col-12">
{{ form.submit(class="btn btn-success btn-block") }}
</div>
</div>
</form>

Django fontsize tinymce

I am trying to use django tinymce in my project but the font is too small. I have googled it and learned I am meant to use content_css but without proper step by step approaches as to how exactly this should be done.
I am wondering if there was another way and if there isn't, could someone give me a simple step by step approach to solving it using the content_css.
Below is the forms.py
class PostForm(forms.ModelForm):
text = forms.CharField(help_text='Enter your Post here', widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))
name = forms.CharField(widget=forms.HiddenInput(), initial='User')
created_on = forms.DateTimeField(widget=forms.HiddenInput(), initial=timezone.now())
class Meta:
model = Post
fields = ('title', 'text',)
{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block body_block %}
<!-- <h1>TinyMCE Quick Start Guide</h1>
<form method='post'>
<textarea id = 'mytextarea'>Hello, World!</textarea>
</form> -->
{% if post %}
<div class="single">
<div class="container">
<div class="col-md-8 single-main">
<div class="single-grid">
<h4>{{ post.title|safe }}</h4>
<img src="{% static 'images/post1.jpg' %}" alt=""/>
<p>{{ post.text|safe }}</p>
</div>
<div class="comments">
<h2><u>Comments</u></h2>
{% if comments %}
{% for comment in comments %}
<h3>~{{ comment.commenter.first_name|title}} {{comment.commenter.last_name|title }}</h3>
<ul>
<li>
{{ comment.text|safe }}
</</li><br>
</ul>
<span class="hidden-xs"style="margin-left:70%;, font-family:Arial">Published: {{ comment.created_on }}</span >
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete</button>
{% endif %}
{% endfor %}
{% else %}
No comments available
{% endif %}
</div>
<div class="content-form">
<h3>Leave a comment</h3>
{% if user.is_authenticated %}
<form id="comment_form" action="{% url 'blog:detail' post.slug %}" method="post">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
{{ field.errors }}
{{ field }}<br/><br/>
{% endfor %}
<input class="btn btn-primary" type="submit" name="submit" value="submit">
</form>
{% else %}
You must be logged in to comment
{% endif %}
</div>
<ul class="comment-list " >
<h5 class="post-author_head">Written by {{ post.author.first_name|title }} {{ post.author.last_name|title }}</h5>
<li><img src="{% static 'images/avatar.png' %}" class="img-responsive" alt="">
<div class="desc">
<p>View all posts by: {{ post.author.first_name|title }} {{ post.author.last_name|title }}</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
<div class="col-md-4 side-content">
<div class="recent">
<h3>RECENT POSTS</h3>
{% if recent_posts %}
<ul>
{% for post in recent_posts %}
<li>{{post.title|title }}</li>
{% endfor %}
</ul>
{% else %}
<li>No post has been posted</li>
{% endif %}
</div>
<div class="comments">
<h3>RECENT COMMENTS</h3>
{% if recent_comments %}
<ul>
{% for comment in recent_comments %}
<li>{{comment.commenter|title}} on {{comment.post|title}}</li>
{% endfor %}
</ul>
{% else %}
<li>No comments at the moment</li>
{% endif %}
</div>
<div class="clearfix"></div>
<div class="archives">
<h3>ARCHIVES</h3>
<ul>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete Post</button>
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Edit Post</button>
{% endif %}
{% else %}
asadsh
{% endif %}
{% endblock %}
To add content css files to tinymce, you have to change the tinymce.init object value to include your content_css.
Search for the initialization call in your script and add a line to your object like in this example:
tinymce.init({
...
content_css: [
'//example.com/js/your-css-here.css'
],
...
});
If a content_css part is already present, just add the URL to the array, i.e.
['url 1 here', 'url 2 here', 'your new url here']
In your custom css file, you can now set your desired font size, i.e.
body { font-size: 14px; }

How do I display the number of object returned from a query

I want to display the number of objects returned from query search. I have tried
{{ p.count }} and {{ Post.count }}
Here is my post_list.html. I have read other posts that use those methods and they do not work for me. I know I am missing something.
{% extends 'posts/base.html' %}
{% block content %}
<div class="col-sm-6 col-sm-offset-3">
<h1>{{ title }}</h1>
<form method="get" action=" ">
<input type="text" name="q" placeholder="search" value="{{ request.GET.q }}"/>
<input type="submit" value=" search"/>
</form>
create
{% for p in queryset %}
<div class="row">
<div class="col-sm-12 "> <!-- i like col-sm-6 -->
<div class="thumbnail">
{% if p.image %}
<img src='{{ p.image.url }}' class="img-responsive" />
{% endif %}
<!--<img src="..." alt="...">-->
<div class="caption">
{% if p.draft %} <h3>Staff Only: Draft</h3> {% if p.publish > today %}<h3>Staff Only: Future Post</h3> {% endif %}
{% endif %}
<h3><a href='{{ p.get_absolute_url}}'>{{p.title}}</a> <small>{{p.publish | timesince }} </small> </h3>
{% if p.user.get_full_name %}<p>Author: {{ p.user.get_full_name }}</p>{% endif %}
<p>{{p.content | truncatechars:30}}</p>
<p>View
{% if user.is_authenticated %}
edit
delete
{% endif %}
</p>
</div>
</div>
</div>
<hr>
</div>
{% endfor %}
<div class="pagination">
<span class="step-links">
{% if queryset.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ queryset.number }} of {{ queryset.paginator.num_pages }}.
</span>
{% if queryset.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Any help will be greatly appreciated. Thanks
You cannot do count on a single object p, because there's no count for that. Only queryset has count method, so do:
{{ queryset.count }}
You'll want to use the the built-in filter length
Returns the length of the value. This works for both strings and lists.
You can use it within your template to get the length of any object
{{ queryset|length }}

MultiValueDictKeyError

I have the following code. The first works, however the second throws a "MultiValueDictKeyError". I've tweaked the code around a bit but I haven't been able to fix it. Any and all help is greatly appreciated!
Working Code:
{% extends "base.html" %}
{% block base_content %}
<link rel="stylesheet" href="/media/themes/txt/css/employee_summary/report.css" />
<form id="myForm" method="post">
{% csrf_token %}
{% for field in form %}
<div class=box>
<div class="row">
<div class="2u">
<h1>{{ field.label_tag }}:</h1>
</div>
<div class="10u">
{{ field }}
</div>
</div>
</div>
{% endfor %}
{% for formset in inlines %}
<div class=box>
{% for form in formset %}
<div class="row">
<div class="12u">
<h1>{{ form }}</h1>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% for formset in inlines %}
{{ formset.management_form }}
{% endfor %}
<input type="submit" value="Save Changes">
</form>
{% endblock %}
Non-Working Code:
{% extends "base.html" %}
{% block base_content %}
<link rel="stylesheet" href="/media/themes/txt/css/employee_summary/report.css" />
<div id="main-wrapper">
<div class="strongborder">
<div id="main" class="container boldtext">
<form id="myForm" method="post" class="12u">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="2u">
<h1>{{ field.label_tag }}:</h1>
</div>
<div class="10u">
{{ field }}
</div>
</div>
{% endfor %}
{% for formset in inlines %}
{% for form in formset %}
<br>
<br>
<h1>{{ form.instance.form_name }}</h1>
{% for field in form %}
<div class="row">
{% if field.label != "Employee" and field.label != "Id" and field.label != "Delete" %}
<label class="2u">{{ field.label }}:</label>
<div class="10u">{{ field }}</div>
{% endif %}
</div>
{% endfor %}
{% endfor %}
{% endfor %}
{% for formset in inlines %}
{{ formset.management_form }}
{% endfor %}
<br>
<br>
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
{% endblock %}
Solved by myself: for some reason it wasn't liking the ID skip in
{% if field.label != "Employee" and field.label != "Id" and field.label != "Delete" %}
... yet it was fine with skipping the employee and delete fields.