<div class="col-lg-12">
                        <div class="form-group position-relative mb-5">
                            <select class="select" id="position" name="position" placeholder="<?= translate('Izaberite poziciju') ?>" required>
                                <option value="">Izaberite</option>
                                <option><?= Translate('Roštilj') ?></option>
                                <option><?= Translate('Giros') ?></option>
                                <option><?= Translate('Palačinke') ?></option>
                                <option><?= Translate('Šalter') ?></option>
                                <option><?= Translate('Magacin') ?></option>
                                <option><?= Translate('Vozač') ?></option>
                            </select>

                            <div class="invalid-feedback">
                                <?= translate('Popunite polje') ?>
                            </div>
                        </div>
                    </div>

This is a column in a form. I'm looking for a solution to make the 'select' element required, just like the other form elements, such as input and radio buttons. While the current form works with other elements, the 'select' element is not behaving as expected. Can you offer the best advice on how to resolve this issue? Thank you.