I have a conditional check where I need to look at a certain checkbox, and depending on that, a multiselect field becomes required.
I have something similar in place:
{% for value, text in form.customfield.field.choices %}
<div class="checkbox custom-control custom-checkbox list-inline-item" style="display:inline-flex;">
<input type="checkbox" name="{{customfield.name}}" value="{{value}}" class="list-inline-item custom-control-input" title="" id="id_{{value}}" {% if value in customfield.data %} checked="checked"{% endif %}>
<label for="id_{{value}}" class="form-check-label custom-control-label mr-3">{{text}}</label>
</div>
{% endfor %}
Is there a way to do error handling for this? I verified that my form.is_valid() returns false, but the error message does not get displayed, like it does for inputs/textboxes. I'm assuming I need to print the specific error out in the template explicitly, as I am not using defaults like {{ form.customfield }} or {{ bootstrap_field }}
form.is_valid() returns False.
form._errors gives me:
<ul class="errorlist"><li>customfield<ul class="errorlist"><li>This field is required when the other field is checked.</li></ul>
Rant: As with many other Django questions I've asked, I had to post my own answer. End Rant!
Along with the above check, just loop through the field.errors and display the error
Note: invalid-feedback is used to hide/display the error message in Bootstrap4, so
<div id="id_{{customfield.name}}" class="list-inline-item {% if customfield.errors %} is-invalid{% endif %}">
{% for value, text in form.customfield.field.choices %}
<div class="checkbox custom-control custom-checkbox list-inline-item">
<input type="checkbox" name="{{customfield.name}}" value="{{value}}" class="list-inline-item custom-control-input" title="" id="id_{{value}}" {% if value in customfield.data %} checked="checked"{% endif %}>
<label for="id_{{value}}" class="form-check-label custom-control-label">{{text}}</label>
</div>
{% endfor %}
</div>
{% if customfield.errors %}
<div class="invalid-feedback">
{% for error in customfield.errors %} {{ error }} {% endfor %}
</div>
{% endif %}
Related
I want to remove the circled bit from being displayed. How would I be able to do this?
{% if form.errors %}
<div class="alert alert-warning alert-dismissible fade show"
role="alert">
<p class="m-0">{{ form.errors }}</p>
<button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close">
</button>
</div>
{% endif %}
This always displays
property where the error is found
error message
error message ...
I want to remove the property where the error is found. How would I do this?
Django Form has two error handlers:
Form.errors are field errors. By default, a dict of key "field name" : value "field errors"
Form.non_field_errors are general errors that have no relation to a field name, mainly errors from the Form.clean(..) method.
So you are trying to do an anti-pattern and a distraction to the user experience. Therefore you can best achieve a better experience by mapping each field to its value without the need to render the field name in the error.
Form custom rendering will give you full access to the Form API, and allow you to display the error in the way you like without the default render, something like the following looping over form's fields:
{% for field in form %}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}
By doing the above, you will also need to render the non_field errors, and the complete HTML tags will be as follows:
{{ form.non_field_errors }}
{% for field in form %}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}
Django also offers manual render for each field something like the following:
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.subject.errors }}
<label for="{{ form.subject.id_for_label }}">Email subject:</label>
{{ form.subject }}
</div>
<div class="fieldWrapper">
{{ form.message.errors }}
<label for="{{ form.message.id_for_label }}">Your message:</label>
{{ form.message }}
</div>
<div class="fieldWrapper">
{{ form.sender.errors }}
<label for="{{ form.sender.id_for_label }}">Your email address:</label>
{{ form.sender }}
</div>
<div class="fieldWrapper">
{{ form.cc_myself.errors }}
<label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
{{ form.cc_myself }}
</div>
Choose the best fit for your needs.
There is still a hacky thing you can do which is not a best practice and will lead to conflicts between Field validation and non-field validation as follows Getting a list of errors in a Django form:
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endfor %}
{% endif %}
In Django 4.0 or high
{% if form.errors %}
{% for error in form.errors.as_data.values %}
{% for data in error.0 %}
{{ data }}
{% endfor %}
{% endfor %}
{% endif %}
I am trying to build website using Flask, and can't find solution to one problem. I am trying to hide or show input field, based on RadioFeild choice. Also, if input field showing, it have to be required. I actually have everything working, besides knowing what RadioField choice was selected. I can see the form when loading page on 127.0.0.1:5000 and I can see RadioField with 2 choices: Yes and No, but when I click on yes, there are no changes, hidden input field is still not showing. Please, help!
app.py
class MyClass(FlaskForm):
my_field = RadioField("bla-bla-bla", choices=[('Yes', 'Yes'), ('No', 'No')], validators [InputRequired()])
#app.route("/some_page")
def some_page():
form = MyClass()
return render_template("some_page.html", form=form)
_render_field.html
{% macro render_radio_field(field) %}
<div class="form__item">
<label class="form__label">{{field.label.text }}</label>
<div class="form-group">
{{ field(class_='form__input', **kwargs)|safe }}
{% for subfield in field %}
<div class="form__item">
<label>
{{ subfield }}
{{ subfield.label.text }}
</label>
</div>
{% endfor %}
</div>
</div>
{% endmacro %}
some_page.html
{% from "_render_field.html" import render_field, render_radio_field %}
{% extends "layout.html" %}
{% block title %}My Title{% endblock %}
{% block content %}
<div style="width:600px; margin:0 auto;">
<h3>Some Text</h3>
<form class="form" action="{{url_for('some_page')}}" method="POST">
{% from "_render_field.html" import render_field, render_radio_field %}
{{ form.csrf_token }}
{{ render_field(my_field, title="", style="list-style:none") }}
{% if form.my_field.option == "Yes" %}
{{ render_field(form.some_other_StringField, placeholder="Please explain:", title="") }}
{% endif %}
<input type="submit" name="" value="login" class="form__btn">
</form>
</div>
{% endblock %}
I am using django_widget_tweaks to loop over form fields:
{% for field in form.visible_fields %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% 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 %}
{% render_field field class="form-control" %}
{% endif %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text }}</small>
{% endif %}
</div>
{% endfor %}
This displays a happy Bootstrap4 compliant interface, except when displaying fields like radio when I need to use a custom-control class not the form-control class.
How can I filter the form field loop to exclude radio inputs so I can write this code separately?
I need to understand how to filter the field loop and what the correct way to do this with the field type for radio is.
I know there are multiple questions like this around, but none of them contain a clear answer. I am using the default authentication from Django, but have trouble displaying something like 'Your username/password combination is incorrect'. Is it possible to fix this without making a custom view function?
My urls.py looks like this:
url(r'^login/$', auth_views.login, {'template_name': 'login.html'},
name='mysite_login')
Then my login.html has the following code:
{% block content %}
<section class="content">
<div class="container block">
<div class="row">
<div class="col-md-12"></div>
<form action="{% url 'mysite_login' %}" class="form-control" method="post" accept-charset="utf-8">
{% csrf_token %}
{% for field in form %}
<p>
{{ field.label_tag }}<br>
{{ field|addcss:'form-control' }}
{% if field.help_text %}
<small style="color: grey">{{ field.help_text|safe }}</small>
{% endif %}
{% for error in field.errors %}
<p style="color: red">{{ error }}</p>
{% endfor %}
</p>
{% endfor %}
<button type="submit" class="btn btn-dark">Login</button>
<input class="form-control" type="hidden" name="next" value="{{ next }}"><br>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
So this all works, except for displaying the error messages. I've seen answers where you can write a custom view function and form to fix this, but I assume it should be also possible while using the build-in login functionality right? Thanks a lot.
The built-in login form doesn't display errors at an individual field level; it's a security risk to say that just the password is wrong, because it confirms the existence of a particular username. So the errors are raised in the general clean() method and are displayed in the template via {{ form.non_field_errors }}.
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>