Introduction
This is an article where the main focus is just to solve an error message appear upon the execution of a Django-based web application. The base for the sample application exist in the previous article. That article has the title of ‘How to Solve Error Message crispy_forms.exceptions.CrispyError: |as_crispy_field got passed an invalid or inexistent field’ and it exist in this link. So, the following is the actual structure of the Django-based web application project :
C:\programming\python\myproject>tree . Folder PATH listing for volume Windows Volume serial number is 00000027 E003:3593 ├───myproject │ asgi.py │ forms.py │ models.py │ settings.py │ urls.py │ views.py │ wsgi.py │ __init__.py └───templates contact.html
At the time when executing the main URL of the project which is ‘localhost:8000’, the error appear. The error message itself appear as in the following image :
The error message is Invalid filter: ‘crispy_field’. That error message exist by considering several files. First of all, it depends on the execution of the URL. The definition of the URL exist in the ‘urls.py’ file in the root folder of the project. The following is the actual content defining the main URL execution :
path('', views.contact),
So, the execution of the main URL will trigger on further execution of ‘views.contact’. That is actually a method or function with the name of ‘contact’ in the ‘views.py’ file. Knowing that, just check the content of the ‘views.py’ especially the ‘contact’ method or function as follows :
def contact(request): contactForm = ContactForm context = {'form': contactForm} return render(request, 'templates/contact.html', context)
According to the script above, the function will return an output by rendering the ‘contact.html’ file exist in the ‘templates’ folder. Using that information, just check the content of the ‘contact.html’ file as follows :
{% load crispy_forms_tags %} <!--Contact form--> <div style="margin: 80px"> <h1>Contact</h1> <h4>Contact us directly if you have any questions</h4> <p> Please write your name, email address and a message below if you have any questions. One of our staff members will be happy to contact you directly and answer your questions as soon as possible. </p> <form method="post"> {% csrf_token %} {{ form.first_name|crispy_field }} <button type="submit">Submit</button> </form> </div>
Solution for Solving Error Message Invalid filter: ‘crispy_field’ in Django Web Application
Finally, after searching through the content of the ‘contact.html’ file above, discovering the culprit or the one triggering the error message. It is on this line :
{% csrf_token %} {{ form.first_name|crispy_field }}
The filter with the name ‘crispy_field’ is invalid. How to correct it ?. The answer is by using the correct filter. What is the correct filter ?. After searching google for the correct filter in order to display an attribute or field in the appearance of crispy forms, the answer is actually using ‘as_crispy_field’. Finding the answer as in the correct filter, just edit and change the template file. Revise the filter as follows :
{% csrf_token %} {{ form.first_name|as_crispy_field }}
In the end, the overall source of the template after revising it will exist as follows :
{% load crispy_forms_tags %} <!--Contact form--> <div style="margin: 80px"> <h1>Contact</h1> <h4>Contact us directly if you have any questions</h4> <p> Please write your name, email address and a message below if you have any questions. One of our staff members will be happy to contact you directly and answer your questions as soon as possible. </p> <form method="post"> {% csrf_token %} {{ form.first_name|as_crispy_field }} <button type="submit">Submit</button> </form> </div>
Last but not least, the execution of the main URL will at last producing the success result as follows :