title: "This field is required" after submitting form in a filled field using django and AJAX
body: <p>I have been trying to add ajax to my django project these past days and I am finding problems with the form submission and data displaying. When I submit a POST form with just one field (with required =True) it does not recognize the form as a valid form (do not pass the .is_valid if) and the form error says &quot;This field is required&quot;:</p>
  <p>forms.py</p>
  <pre><code>enter code here
  
  from django import forms
  import datetime
  
  class FriendForm(forms.Form):
        
      name = forms.CharField( required=True,  widget=forms.TextInput(attrs={'class': 'special', 'id':'id_name', 'name':'name'}))
      
  </code></pre>
  <p>views.py</p>
  <pre><code>from django.http import JsonResponse, HttpResponse
  from django.shortcuts import render
  from django.core import serializers
  from .forms import FriendForm, form_busqueda_address
  from .models import Friend
  import json
  import requests
  from decimal import Decimal
  import decimal
  
  def indexView (request):
      form = FriendForm ()
      friends = Friend.objects.all ()
      return render (request, &quot;index.html&quot;, {&quot;form&quot;: form, &quot;friends&quot;: friends})
  
  
  
  def searchFriend(request):
      form = FriendForm ()
      if request.method ==&quot;POST&quot;:
          form = FriendForm (request.POST)
          
          if form.is_valid():
              form = FriendForm (request.POST)
              name = form.cleaned_data['name']
              query = Friend.objects.filter(nick_name=name)
              responseData = serializers.serialize('json', list(query))
              return JsonResponse(responseData, safe=False)
  
          else:
  
              print(form.errors)
              query = {
                          'errors': form.errors,
                      }
              return HttpResponse(json.dumps(query), content_type=&quot;application/json&quot;)
  </code></pre>
  <p>main.js</p>
  <pre><code>$(document).ready(function(){
      function getCookie(name) {
          var cookieValue = null;
          if (document.cookie &amp;&amp; document.cookie !== '') {
              var cookies = document.cookie.split(';');
              for (var i = 0; i &lt; cookies.length; i++) {
                  var cookie = cookies[i].trim();
                  // Does this cookie string begin with the name we want?
                  if (cookie.substring(0, name.length + 1) === (name + '=')) {
                      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                      break;
                  }
              }
          }
          return cookieValue;
      }
      var csrftoken = getCookie('csrftoken');
   
      function csrfSafeMethod(method) {
          // these HTTP methods do not require CSRF protection
          return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
      }
      $.ajaxSetup({
          beforeSend: function(xhr, settings) {
              if (!csrfSafeMethod(settings.type) &amp;&amp; !this.crossDomain) {
                  xhr.setRequestHeader(&quot;X-CSRFToken&quot;, csrftoken);
              }
          }
      });
  });
  
  
  var getData;
  
  
          $(&quot;#form1&quot;).submit(function(e) {// catch the form's submit event
          e.preventDefault();
          var search = $(&quot;#id_name&quot;).val();
          
          var $content = $('#display');
              $.ajax({ // create an AJAX call...
                  type: 'post',
                  data: $(search).serialize(),
                  dataType: 'json',
                  url: &quot;search/ajax/friend/&quot;,
                  success: function(query) { // on success..
                     
  
                      console.log(query)
               
                  
                  }
              });
              
          });
  
          $(&quot;#form-ajax&quot;).submit(function(e) { // catch the form's submit eve
          e.preventDefault();
          console.log('ok')
                  });
            
              
     
  </code></pre>
  <p>index.html</p>
  <pre><code>&lt;div class=&quot;col-md-6&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
      &lt;form method=&quot;post&quot; id=&quot;form1&quot;  enctype=&quot;multipart/form-data&quot;&gt; 
          {% csrf_token %}
  
          &lt;table&gt;
              {{form.as_table}}
          &lt;/table&gt;
          &lt;button type=&quot;submit&quot;  value=&quot;Submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
      
  </code></pre>
  <p><strong>EDIT 1</strong>:</p>
  <p>I have modified main.js in order to change where .serialize() was pointing and alse have deleted the csrf token function. The current main.js is:</p>
  <pre><code>    $(&quot;#form1&quot;).submit(function(e) {// catch the form's submit event
      e.preventDefault();
      var search = $(&quot;#id_name&quot;).val();
      
      var $content = $('#display');
          $.ajax({ // create an AJAX call...
              type: 'post',
              data: { 'search' :  $(this).serialize(),
                  'csrfmiddlewaretoken': $(&quot;input[name=csrfmiddlewaretoken]&quot;).val()},
              dataType: 'json',
              url: &quot;search/ajax/friend/&quot;,
              success: function(query) { // on success..
                 
  
                  console.log(query)
           
              
              }
          });
          
      });
  </code></pre>
  <p>If we go to browser we can se the following:</p>
  <p><a href="https://i.stack.imgur.com/zpepy.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>It seems like the form is actually getting the field info, but for whatever reason my view take it as empty.</p>