обязательное поле при его отображении

11 марта 2022, 18:20

есть поля выбора select из дувх значений. при выборе одного из значения появляется доп поле. как сделать чтобы оно было обязательное если он есть и не обязательно если его нет

Answer 1

Пример (Если выбрано поле 1 - то показывается доп. поле и оно обязательное, если выбрано 2, то поле не обязательное и скрыть.

    function change1() { 
        let val = $('#sel1').val(); //Получаем значение поля селект. 
        if (val === "1"){ //Если значение 1 то добавляем "required" и удаляем класс "hidden" , который скрывает поле, если select = 2 то скрываем и делаем не обязательным 
            $('#sel1').prop('required', true);  // делаем обязательным поле 
            $('#dop1').removeClass('hidden'); // Убираем класс, который скрывает поле 
        } else { 
            $('#sel1').prop('required', false); // делаем не обязательным 
            $('#dop1').addClass('hidden'); // Добавляем класс, который скрывает поле. 
        } 
    }

    .bobik{ 
        background: #9ED3E9; 
        font-weight: bold; 
    } 
    .hidden { 
        visibility: hidden; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select id="sel1" class="bobik" onchange="change1()"> 
    <option>1</option> 
    <option>2</option> 
</select> 
<div id="dop1" required>Дополнительное поле</div>

Вот второй пример для наглядности(Добавил в случае выбора первого селекта - скрытие поля и убирание обязательности, чтобы можно было вернуть)

    function change1() { 
        let val = $('#sel1').val(); //Получаем значение поля селект. 
        if (val !== ""){ //Если значение 1 2 или 3 то добавляем "required" и удаляем класс "hidden" , который скрывает поле, если поле ""(первый селект) То скрываем и делаем не обязательным 
            $('#sel1').prop('required', true);  // делаем обязательным поле 
            $('#dop1').removeClass('hidden'); // Убираем класс, который скрывает поле 
        } else { 
            $('#sel1').prop('required', false); // делаем не обязательным 
            $('#dop1').addClass('hidden'); // Добавляем класс, который скрывает поле. 
        } 
    } 
    function change2() { 
        let val = $('#sel2').val(); 
        if (val !== ""){ 
            $('#sel2').prop('required', true); 
            $('#dop2').removeClass('hidden'); 
        } else { 
            $('#sel2').prop('required', false); 
            $('#dop2').addClass('hidden'); 
        } 
    }

<style> 
    .bobik{ 
        background: #9ED3E9; 
        font-weight: bold; 
    } 
    .hidden { 
        visibility: hidden; 
    } 
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select id="sel1" class="bobik" onchange="change1()"> 
    <option></option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
<div id="dop1" class="hidden">Дополнительное поле</div> 
<select id="sel2" class="bobik" onchange="change2()"> 
    <option></option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
<div id="dop2" class="hidden">Дополнительное поле</div>

Вот пример с одним селектом, как указано в вопросе: