Introduction
As an article which is pointing out how to solve an error message, this article is using a base application from another article. The article exist with the title of ‘How to Use Crispy Form Tag in Django by Using a Form’ in this link. Basically, there are several actual condition on the Django-based web framework application triggering the error message. The simple error message appear as follows :
crispy_forms.exceptions.CrispyError: |as_crispy_field got passed an invalid or inexistent field
The error appear upon the access or the execution of a certain page of the Django-based web framework application. It is an application with the URL of ‘localhost:8000’. The following is the exact image presenting the error message :
Before moving on further, the following is the actual structure of the project using Django-based web framework :
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
Moreover, the following is the content of several important files which is triggering the above error message. The first one is the ‘urls.py’ file as in the following below :
from django.contrib import admin
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.contact),
]
Basically, the error appear upon executing the main URL of ” which in this context it is the ‘localhost:8000’. According to the urls.py file configuration, it will execute a contact function in the ‘views.py’ file. The following is the content of the ‘views.py’ with the contact function :
def contact(request):
contactForm = ContactForm
context = {'form': contactForm}
render(request, 'templates/contact.html', context)
First of all, check the ContactForm class. It is the class which is becoming the base form the form. The following is the content of the ‘ContactForm’ class :
class ContactForm(forms.Form):
first_name = forms.CharField(widget=forms.TextInput(
attrs={'placeholder': 'First Name'}))
last_name = forms.CharField(widget=forms.TextInput(
attrs={'placeholder': 'First Name'}))
Later on, the form itself will be passed as an argument for further render in the ‘contact.html’ file exist in the ‘templates’ folder. Last but not least, it is the file exist in the folder of templates with the name of ‘contact.html’. The following is the content of the ‘contact.html’ file :
<!--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.name|as_crispy_field }}
<button type="submit">Submit</button>
</form>
</div>
Actually, the error above exist also in the following image where there is a specific and detail information about the precise code for the one triggering the error :
So, the error appear in the configuration line of ‘{{ form.name|as_crispy_field }}’.
Solution
This part will discuss about how to solve the above problem where the error message appear. As in the introduction part, the cause of the error message appearing is already clear. It is in the line of ‘{{ form.name|as_crispy_field}}’. So, the following line is causing the error message :
'{{ form.name|as_crispy_field }}'
Actually, the solution for solving the above problem is very simple. First of all, the error is informing that the ‘as_crispy_field’ method passed to the form attribute is invalid or inexistent field. Check the name of the attribute in the source code. It is ‘form.name’ where the attribute or the field which is invalid or inexistent is ‘name’. Just cross check it with the ‘ContactForm’ class above. Is there any attribute or field with the name of ‘name’. Apparently, there is no attribute or field with that name. There are two attribute or field in the ContactForm class. Those attributes or fields are ‘first_name’ and ‘last_name’.
So, the solution is either editing the ContactForm class to add the ‘name’ attribute or editing the contact.html file to have one of the attributes or fields available in the ContactForm. It can be ‘first_name’ or it can be ‘last_name’. Just choose one of them.
Solve by Editing the Form Class
The following is the solution to change the ContactForm class by adding the attribute or field ‘name’ :
class ContactForm(forms.Form):
name = forms.CharField(widget=forms.TextInput(
attrs={'placeholder': 'Name'}))
first_name = forms.CharField(widget=forms.TextInput(
attrs={'placeholder': 'First Name'}))
last_name = forms.CharField(widget=forms.TextInput(
attrs={'placeholder': 'First Name'}))
After editing the ContactForm, the following is the display of the page where the error does not appear anymore :
Solve by Editing the HTML Template File
Another solution is just by editing the HTML template file by adding the exist attribute or field which is originally exist in the ContactForm class. Either add the ‘first_name’ or ‘last_name’. Following after, remove the non-existent attribute or field with the name of ‘name’. Just edit 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|as_crispy_field }}
<button type="submit">Submit</button>
</form>
</div>
After editing the HTML template file with the name of ‘contact.html’, the following is the output as an image from the execution of the page :