How to Solve Error CSRF verification failed. Request Aborted when submitting a Form in Django Application

By Posted on

Introduction

This is actually an article where it has a connection with one previous article. That article is ‘How to Send Input Text from Django Template File to Function exist in Django View using POST method in Django Application‘. Actually, there is an error appear upon implementing how to demonstrate the process. In other word, an error appear after sending an input text from a text field. That error message exist after submitting a form by clicking a submit button. In that form, there is only one text field where user text input will be passed to a function exist in the Django application. Moreover, the function declaration is exist in ‘views.py’ file exist as part of the Django application in the Django application folder. For more information about the Django project or Django application, it exist in article ‘How to Send Input Text from Django Template File to Function exist in Django View using POST method in Django Application‘. Before getting on to the solution, below is the example of the appearance of the error soon after the submit process exist :

How to Solve Error CSRF verification failed. Request Aborted when submitting a Form in Django Application
How to Solve Error CSRF verification failed. Request Aborted when submitting a Form in Django Application

How to Solve Error CSRF verification failed. Request Aborted when submitting a Form

So, for the above problem, actually it is very easy in order to solve. Because the solution is already exist as part of the error message. One of the alternative solution is actually given which is turn out to be the real solution. It is the solution as follow :

In the template, there is a {% csrf_token %} template tag inside each POST form that targets an internal URL.

So, in order to make sure that it is really the cause of the problem, below is the actual step for solving it :

  1. First of all, the focus will be checking the form where it is using the POST method. Actually, it exist in the Django template file with the name ‘add_employee.html’. It is available in the ‘templates’ folder inside the ‘apps’ folder which is representing the application folder. Below is the snippet code from the ‘index.html’ which is highlighting the form only : 

        <form method="POST" action="{% url 'add_employee' %}">
        <div>
            Employee Name :
            <input type="text" name="employee_name"></input>
            <input type="submit" value="Submit"></input>
        </div>
    </form>

  2. As in the above snippet code from the ‘index.html’ file,it is obvious that it missing ‘{% csrf_token %}’. Although, it is a form with a POST method, it does not contain ‘{% csrf_token %}’, just add ‘{% csrf_token %}’ inside the form tag. So, the following is the revision of the form tag after adding ‘{% csrf_token %}’ : 

        <form method="POST" action="{% url 'add_employee' %}">
        {% csrf_token %}
        <div>
            Employee Name :
            <input type="text" name="employee_name"></input>
            <input type="submit" value="Submit"></input>
        </div>
    </form>

  3. In the end, the following is the actual complete content of the file with the name of ‘add_employee.html’ : 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Employee</title>
</head>
<body>
    <form method="POST" action="{% url 'add_employee' %}">
        {% csrf_token %}
            Employee Name :
            <input type="text" name="employee_name"></input>
            <input type="submit" value="Submit"></input>
        </div>
    </form>
</body>
</html>
  4. Finally, just refresh the page, start input and execute it further by clicking the submit form to process it further. If there are no error messages appear, it will process the request normally as it exist in article ‘How to Send Input Text from Django Template File to Function exist in Django View using POST method in Django Application‘.

Leave a Reply