Если select2 равен null, сделать поле ввода обязательным для заполнения

У меня есть текстовое поле и поле select2. Пользователь может ввести что-то в поле ввода, но также может выбрать предопределенный вариант из поля select2.

Я хочу сделать следующее: если select2 выбран, то форма проходит, если нет, то поле ввода будет обязательным и форма не сможет пройти.

Я уже сделал логику в бэкенде (Django), которая копирует значение select2 в текстовое поле, просто чтобы убедиться, что все данные действительны, но если я оставлю фронтенд без валидации, пользователь может оставить все пустым и отправить пустую форму

Вот мой html:

<table id="myTable" class="table order-list">
    <thead>
        <tr>
            <td>Médicament</td>
            <td>Dosage</td>
            <td>Posologie</td>
            <td>Durée</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-5">
                <div class="row">
                    <div class="col-6">
                        <input class="form-control mb-4" placeholder="Nom du médicament" type="text" name="medicament0">
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament0">
                                <option value="0">Ou choisir de la liste</option>
                                {% for d in drugs %}   
                                    <option value="{{ d.id }}">{{ d }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    
                </div>
            </td>

            <td>
                <input class="form-control mb-4" placeholder="20mg" type="text" name="dosage0">
            </td>

            <td>
                <input class="form-control mb-4" placeholder="2 / j avant repas" type="text" name="posologie0">
            </td>

            <td>
                <input class="form-control mb-4" placeholder="7 jours" type="text" name="duree0">
            </td>

            <td><a class="deleteRow"></a>
                <input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
            </td>

        </tr>
    </tbody>
    
</table>

У меня также есть этот javascript для динамического добавления строки, если пользователь хочет отправить несколько записей:

<script>
    $(document).ready(function () {
        var counter = 1;
    
        $("#addrow").on("click", function () {
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td class="col-5"><div class="row"><div class="col-6">' +
                    '<input class="form-control medic-field mb-4" placeholder="Nom du médicament" type="text" name="medicament'+ counter +'">' +
                    '</div><div class="col-6"> <div class="form-group">' +
                    '<select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament'+ counter +'">' +
                    '<option value="0">Ou choisir de la liste</option> {% for d in drugs %} <option value="{{ d.id }}">{{ d }}</option>' +
                    '{% endfor %} </select> </div></div></div>' +
                    '</td>' +
                    '<td><input class="form-control mb-4" placeholder="20mg" type="text" name="dosage'+ counter +'"></td>' +
                    '<td><input class="form-control mb-4" placeholder="2 / j avant repas" type="text" name="posologie'+ counter +'"></td>' +
                    '<td><input class="form-control mb-4" placeholder="7 jours" type="text" name="duree'+ counter +'"></td>' +
                    '<td><a href="javascript:void(0);"><i class="ibtnDel fa fa-2x fa-close" style="color: red;"></i></a></td>';
            newRow.append(cols);
            $("table.order-list").append(newRow);
            
            //Initialize Select2 Elements
            $('.select2-show-search').select2();
            $("table.order-list").append('<input type="hidden" name="counter" value="' + counter + '"/>');
            counter++;
        });
    
    
    
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
            counter -= 1
        });
    
    
    });
</script>

Вот два поля:

<input class="form-control mb-4" placeholder="Nom du médicament" type="text" name="medicament0">
...
<select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament0">
    <option value="0">Ou choisir de la liste</option>
    {% for d in drugs %}   
        <option value="{{ d.id }}">{{ d }}</option>
    {% endfor %}
</select>

Моя проблема в том, что если я оставляю input (с id medicament-id0) пустым, а поле select не пустое, то форма проходит, если поле select пустое, то input должен быть обязательным.

Вернуться на верх