Why django wizard form does not go back before filling the form?

I am trying to split one django form to two forms with two different templates. So after googling I found that the solution is using wizard form. Here is my code:

in view.py:

FORMS = [("0", postform_1stpage),
     ("1", postform_2ndpage)]

TEMPLATES = {"0": "myapp/postform_1stpage.html",
         "1": "myapp/postform_2ndpage.html"}

class ExampleWizard(SessionWizardView):
    instance = None
    file_storage = FileSystemStorage(location=os.path.join(settings.MEDIA_ROOT, 'images_folder'))

            
    def get_template_names(self):
        return [TEMPLATES[self.steps.current]]

    def get_form_instance( self, step ):
        if self.instance is None:
            self.instance = Post() #model instance
        return self.instance

    def done(self, form_list, **kwargs):

        self.instance.author = self.request.user
        self.instance.save()
        return redirect('home')


    def get_form_step_files(self, form):
        return form.files

    def process_step_files(self, form):
        return self.get_form_step_files(form)

and in url.py:

`path('create/post/new', login_required(ExampleWizard.as_view(FORMS)), name='new-post')`

and for second template in the form step 2:

{% block content %}
   <form method="POST" action="" enctype="multipart/form-data">
      <fieldset class="form-group">
        {% csrf_token %}
        {{ wizard.form.management_form }}
        <div class="row justify-content-center">
             

             <div class="form-input mt-10">
                    <div class="image_preview">
                       <img id="file-preview" src="{{ wizard.form.image.url }}" alt="....">
                    </div>
                    <label for="file-ip">Add picture</label>
                    <input type="file" id="file-ip" name ="image" id="image.id" accept="images_forlder/*" onchange="showPreview(event);">
             </div>

      </fieldset>
      <div class="py-auto px-auto">
          # the bug is related to this part
          <button type="submit" class="btn btn-sm btn-outline-info" style="font-weight: 700;" name="wizard_goto_step"value="{{ wizard.steps.first }}" >Back</button>
      </div>
      <input type="submit" value="Submit" />
   </form>

{{ wizard.form.media }}
{% endblock content %}

my question:

Once I press Back button in the second page, second page form validation asks me to fill the form first before letting back, I don't know why!!

Naturally your forms get validated after submitting! Try to add formnovalidate to your button:

<button type="submit" class="btn btn-sm btn-outline-info" style="font-weight: 700;" name="wizard_goto_step"value="{{ wizard.steps.prev }}" formnovalidate>Back</button>