Making a dependent dropdown required when there are available options using Django?

Question

I have a form with a dependent drop-down that I implemented using this tutorial https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html.

Currently, I have it set so that the second drop-down only appears if there are options available in it, otherwise is hidden. What I am having trouble with is that, whenever you choose a primary(Work Area) option that has a secondary(Station) drop-down, you can submit the form without having selected an option from the dependent (secondary) drop-down, which is supposed to be required whenever there are options in it.

How can I modify this so that the dependent drop-down is required whenever it appears?

models.py

class WorkArea(models.Model):
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name


class Station(models.Model):
    work_area = models.ForeignKey(WorkArea, on_delete=models.CASCADE, related_name="stations")
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name


class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    employee_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False)
    work_area = models.ForeignKey(WorkArea, on_delete=models.SET_NULL, null=True, blank=False, help_text="Work Area", related_name="work_area")
    station_number = models.ForeignKey(Station, on_delete=models.SET_NULL, null=True, help_text="Station", related_name="stations", blank=True)

forms.py

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number')


    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['station_number'].queryset = Station.objects.none()

        if 'work_area' in self.data:
            try:
                work_area_id = int(self.data.get('work_area'))
                self.fields['station_number'].queryset = Station.objects.filter(work_area_id=work_area_id).order_by('name')
            except (ValueError, TypeError):
                pass
        elif self.instance.pk:
            self.fields['station_number'].queryset = self.instance.work_area.stations.order_by('name')

views.py

def enter_exit_area(request):
    enter_without_exit = None
    exit_without_enter = None

    if request.method == 'POST':
        # Form handling...

def load_stations(request):
    work_area_id = request.GET.get('work_area')
    stations = Station.objects.filter(work_area_id=work_area_id).order_by('name')
    return render(request, 'operations/station_number_dropdown_options.html', {'stations': stations})

urls.py

urlpatterns = [
    url(r'enter-exit-area/$', views.enter_exit_area, name='enter_exit_area'),

    path('ajax/load-stations/', views.load_stations, name='ajax_load_stations'),
]

station_number_dropdown_options.html

<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}

My dropdown is currently called with the following script within the main html

enter_exit_area.html

{% block main %}
    <form id="warehouseForm" action="" method="POST" class="form-horizontal" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
        {% csrf_token %}

        <div>
            <div>
                <label>Employee #</label>
                {{ form.employee_number }}
            </div>

            <div>
                <label>Work Area</label>
                {{ form.work_area }}
            </div>
            <div id="my-hidden-div">
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>
                <button type="submit" name="leave_area" value="Leave">Leave Area</button>
            </div>
        </div>
    </form>

    <script>
        $("#id_work_area").change(function () {
            var url = $("#warehouseForm").attr("data-stations-url");
            var workAreaId = $(this).val();

            $.ajax({
                url: url,
                data: {
                    'work_area': workAreaId
                },
                success: function (data) {
                    $("#my-hidden-div").show(); // show it
                    $("#id_station_number").html(data);
                    // Check the length of the options child elements of the select
                    if ($("#id_station_number option").length == 1) {
                        $("#id_station_number").parent().hide(); // Hide parent of the select node
                    } else {
                        // If any option, ensure the select is shown
                        $("#id_station_number").parent().show();
                    }
                }
            });
        });
     </script>
{% endblock main %}

Answer 1

You can add a clean_station method to the form.

Then in the clean method for station, ensure that it has a value or raise a ValidationError

Something simple like:

    def clean_station(self):
        station = self.cleaned_data["station"]
        if not station:
            raise forms.ValidationError("You must select a station!")