using django with bootstrap tab list

Using Django Templates & Frontend
1

Hi All,

I am trying to use bootstraps tab list with django,
Basically i have grouped my fields under several fieldsets in the modelform.
in the html template i generate bs nav-pills and tab-control to show the fields.
it renders fine. below is the code.
However whenever the user leaves a required field empty in a tab
which is not active and clicks submit, django cannot put the focus on the required field.
the same form works fine without bs tabs.
So is there a way for me to be able to use django validation or do I need to
write my own js to loop through all required fields and set focus?

========= the model form ================
class PostSellTutorForm(forms.ModelForm):
class Meta:
model = SellTutor
exclude = default_exclude + [‘post’]

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)

    self.fieldsets = [
            ['Basics', {'comment': 'about the tutor', 'fields': ['english', 'languages', 'years_of_experience', 'primary_occupation', 'message']}],
            ['Cost', {'comment': 'tutor cost', 'fields': ['hourly_rate', 'free_trial', 'free_trial_hours']}],
        ]
    
def get_fieldsets(self):
    return self.fieldsets

============ the render function ===============
def render_post_form(request, template, form, title, post_id, post_type, partial_save):
context = {}
# context[‘fieldsets’] = form.Fieldsets.value
context[‘form’] = PostSellTutorForm
context[‘page_title’] = title
context[‘post_id’] = post_id
context[‘post_type’] = post_type
context[‘partial_save’] = partial_save
return render(request, template, context)

=========== the template =======================
{% load static %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<title>Tutor</title>
{% load crispy_forms_tags %}

Toggleable Pills


{# Include the hidden fields #} {% for hidden in form.hidden_fields %} {{ hidden }} {% endfor %} {# Include the visible fields #} {{ form.non_field_errors }} 
{{ form.title.errors }}
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
  {% for fieldset_name, fieldset in form.get_fieldsets %}      
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#{{fieldset_name}}">{{fieldset_name}}</a>
  </li>
  {% endfor %}
</ul>

<!-- Tab panes -->
  <form method="post" class="tab-content">
    {% for fieldset_name, fieldset in form.get_fieldsets %}
    <div id="{{ fieldset_name }}" class="container tab-pane fade"><br>
      <h3>{{ fieldset_name }}</h3>
      {% csrf_token %}        
      <div class="form-group">
        {% for field in form %}
          {% if field.name in fieldset.fields %}
            <div class="form-group">

              {{ field |as_crispy_field}}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {% endfor %}
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>