{% load static %}

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- MDB -->
<link rel="stylesheet" href="{% static 'css/mdb.min.css' %}" />

<title>Dashboard</title>


<style>
    .modal-content {
        background: #efefef;
    }

    .modal-body {
        background: #fff
    }

    .export {
        margin-left: 10px;
    }

    .add,
    .add:hover {
        background: #38598b;
        color: #fff;
    }

    .export,
    .export:hover {
        background: #2c786c;
        color: #fff
    }

    .table-editor {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .alert-dismissible {
        padding-right: unset !important;
    }

    .modal-body {
        padding: 10px !important;
    }

    .results tr[visible='false'],
    .no-result {
        display: none;
    }

    .results tr[visible='true'] {
        display: table-row;
    }

    .counter {
        padding: 8px;
        color: #ccc;
    }

    .datatable-pagination {
        display: none;
    }

    .select-wrapper {
        width: 100%;
    }
</style>


{% block navbar_content %}
<!-- Navbar content goes here -->
{% include 'navbar.html' %}
{% endblock %}

{% block content %}

{% endblock %}



<!-- MDB -->

<script type="text/javascript" src="{% static 'js/mdb.umd.min.js' %}"></script>

<!-- MDB PLUGINS -->
<script type="text/javascript" src="{% static 'js/all.min.js' %}"></script>


<script>
    $(document).ready(function () {
        $('select').each(function () {
            mdb.Select.getOrCreateInstance(this);

        });
    });

</script>

This is my base.html page

Add Asset User {% csrf_token %}

                    <div class="modal-body">

                        <div class="row">
                            <div class="col-12">
                                <div data-mdb-input-init class="form-outline mb-4">
                                    <input required type="text" id="first_name" name="first_name"
                                        class="form-control" />
                                    <label class="form-label" for="first_name">First Name <span style="color: red;">*</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div data-mdb-input-init class="form-outline mb-4">
                                    <input required type="text" id="last_name" name="last_name" class="form-control" />
                                    <label class="form-label" for="last_name">Last Name <span style="color: red;">*</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div data-mdb-input-init class="form-outline mb-4">
                                    <input type="text" id="employee_code" name="employee_code" class="form-control" />
                                    <label class="form-label" for="employee_code">Employee Code</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div data-mdb-input-init class="form-outline mb-4">
                                    <input type="email" id="email" name="email" class="form-control" />
                                    <label class="form-label" for="email">Email</label>
                                </div>
                            </div>


                            <div class="col-12">
                                <div class="form-outline mb-4">
                                    <select required  class="form-select" name="branch_name">
                                        <option value=""></option>
                                        {% for data in branch_name_data %}
                                        <option value="{{ data }}">{{ data }}</option>
                                        {% endfor %}
                                    </select>
                                    <label class="form-label select-label" for="branch_name">Branch Name<span style="color: red;">*</span></label>
                                </div>
                            </div>



                            <div class="col-12">
                                <div class="form-outline mb-4">
                                    <select required 
                                        class="form-select" name="department_name">
                                        <option value=""></option>
                                        {% for data in department_name_data %}
                                        <option value="{{ data }}">{{ data }}</option>
                                        {% endfor %}
                                    </select>
                                    <label class="form-label select-label" for="department_name">Department Name <span style="color: red;">*</span></label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-outline mb-4">
                                    <select required class="form-select" name="cost_center">
                                        <option value=""></option>
                                        {% for data in cost_center_data %}
                                        <option value="{{ data }}">{{ data }}</option>
                                        {% endfor %}
                                    </select>
                                    <label class="form-label select-label" for="cost_center">Cost Center <span style="color: red;">*</span></label>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="submitBtn" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

This is my asset.html page which extends base.html

and below this i have a script this

<script>




$(document).ready(function () {

    $('select').each(function () {
        mdb.Select.getInstance(this);

    });

    // First DOM logic for form validation
    $('#assetUserAddForm').submit(function (event) {
        // Prevent form submission
        event.preventDefault();

        // Perform form validation
        var isValid = true;
        $('.form-control[required]').each(function () {
            if ($(this).val() == '') {
                $(this).addClass('is-invalid');
                isValid = false;
            } else {
                $(this).removeClass('is-invalid');
            }
        });

        // Check for select elements with the 'form-select' class
        $('.form-select[required]').each(function () {
            var mdbSelectInstance = mdb.Select.getInstance(this);
            if (!mdbSelectInstance || mdbSelectInstance.getSelected().length === 0) {
                $(this).siblings('.select-wrapper').addClass('is-invalid'); // Adjust selector to target the select wrapper
                isValid = false;
            } else {
                $(this).siblings('.select-wrapper').removeClass('is-invalid'); // Adjust selector to target the select wrapper
            }
        });


        // If form is valid, submit the form
        if (isValid) {
            this.submit();
        }
    });



    // Second DOM logic for submitting the form when the button is clicked
    $('#submitBtn').click(function () {
        $('#assetUserAddForm').submit();
    });



    // Display the modal when messages exist
    {% for message in messages %}
    {% if messages %}
    $('#messageModal').modal('show');
    {% endif %}
    {% endfor %}
});
</script>

so bascially the validation of select tag is not working if i initialize the select tag then also like which you have told