How to Solve Error Message This Field is Required in Django

By Posted on

As it is available in the title of this article, the main focus is about solving an error. There is an error message appear when performing a form submit in Django application. The error message is ‘This field is required’. The following is an image describing the error message : Please refer to the article in this link with the title of ‘How to Display Form Error in Django’. For further description, before going on to the solution, the following is the directory structure of the Django application : 

user@hostname:~/python/project$ tree -L 3
.
├── app
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_article.py
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   └── temp
│   ├── models.py
│   ├── __pycache__
│   │   ├── admin.cpython-36.pyc
│   │   ├── forms.cpython-36.pyc
│   │   ├── __init__.cpython-36.pyc
│   │   ├── __init__.cpython-37.pyc
│   │   ├── models.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── templates
│   │   └── app
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
├── project
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── __init__.cpython-37.pyc
│   │   ├── settings.cpython-36.pyc
│   │   ├── settings.cpython-37.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── wsgi.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── static
    ├── css
    ├── img
    └── js

23 directories, 65 files
user@hostname:~/python/project$

The files available to support the program are the model, form and also the view file. Those files are the python files. But there is also another important file for displaying the interface of the web application and it is actually a HTML page file. Below is the location of that file : 

│   ├── templates
│   │   └── app
|   |        └── add.html
|   |        └── base.html

The first python file is a file with the name of ‘models.py’. It is for defining the model available to support the application. The following is the content of that file : 

from django.db import models

# Create your models here.
class MyModel(models.Model):
    name = models.CharField(max_length=100)

The above content is just a simple content for defining a model with the name of ‘MyModel’. There is only one attribute or field of the model. The second file is the file for defining the form. That file has the name of ‘forms.py’ and iit has the following content : 

from django import forms
from app.models import MyModel

class MyForm(forms.ModelForm):
    name = forms.CharField()

    class Meta:
        model = MyModel
        fields = ('name',)

Referring to the above lines of code of the forms.py, it only has one form field with the name of ‘name’. The form refers to the model with the name of MyModel in the previous definition. The last python file which is also important in the process is the view file with the name of ‘views.py’. The content of the file specifically the method for processing the submit request POST available as follows : 

def add(request):
    if request.method == "POST" or None:
        form = MyForm(request.POST or None)
        if  form.is_valid():
            form.save()
            return render(request,'app/list.html',{'form':form})
        else:
            form = MyForm()
            return render(request, 'app/add.html',{'form':form})
    else:
        return render(request, 'app/add.html')

But there is also another important file for displaying the interface of the web application and it is actually a HTML page file. It is a file with the name of ‘add.html’. It exist in the templates folder under the app folder. Below is the content of that file : 

{% extends 'app/base.html' %}
{% block content %}
<form method="POST" action="{% url 'app-add' %}">
      {% csrf_token %}
      <div class="form-group">
           <label for="exampleInputName">Asset Name</label>
           <input type="text" class="form-control" id="name" aria-describedby="name" placeholder="Name">
      </div>

      {% 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 %}
      <button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endblock %}

There is only one place to look for in the above script which is causing the error or the problem, It is in the following line : 

<input type="text" class="form-control" id="name" aria-describedby="name" placeholder="Name">

Just modify the above line into the following script : 

<input type="text" class="form-control" name="name" aria-describedby="name" placeholder="Name">

Change the ‘id’ attribute of the text input field into ‘name’. Don’t forget to set the value of the ‘name’ attribute to match the field name definition of the form. Previously, the name of the field is also ‘name’. Execute the form again, if there are no other problems, the process will be a success.

Leave a Reply