Если выбран переключатель, требуется заполнить НЕСКОЛЬКО текстовых полей для проверки формы.

У меня есть группа из 3 переключателей. Если выбран последний вариант с надписью «В доме». Все 4 текстовых поля должны быть заполнены ОБЯЗАТЕЛЬНО, чтобы форма прошла проверку. Я видел много информации о том, как это сделать с помощью флажков или текстового поля SINGULAR, однако ничего похожего на то, что я пытаюсь достичь здесь с несколькими текстовыми полями.

HTML:

<div class="col-6 radio-group">
    <b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
    <span>
    <input value="location" name="F429_backupAtLocRadio" type="radio" required="">
    </span><span>Location 
    <input value="hub" name="F429_backupAtLocRadio" type="radio">
    </span><span>Hub 
    <input value="inHome" name="F429_backupAtLocRadio" class="inHome" type="radio">
    </span>In Home 
    </div>
<div class="row">
 <div class="col-3">
    <span style="font-size: 11pt;">Model <br>
    <input id="backupModel" class="backupModel inHome" name="F429_backupModel" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">Serial# <br>
    <input id="F429_backupSerial" class="F429_backupSerial inHome" name="F429_backupSerial" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">Hours<br>
    <input id="F429_backupPmDueCurrentHours" class="F429_backupPmDueCurrentHours inHome" 
name="F429_backupPmDueCurrentHours" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">PM due date<br>
    <input id="F429_backupPmDueDate" class="F429_backupPmDueDate inHome" name="F429_backupPmDueDate" 
type="text">
    </span>
</div>
</div>

Javascript:

<script>
var radio = document.querySelector('input[class="inHome"]');
var textInput = document.querySelector('input[class="F429_mpvSetting"]');

function toggleRequired() {

if (textInput.hasAttribute('required') !== true) {
    textInput.setAttribute('required','required');
}

else {
    textInput.removeAttribute('required');  
}
}

radio.addEventListener('change',toggleRequired,false);

</script>

person Control-z    schedule 03.03.2020    source источник
comment
'input[class="F429_mpvSetting"]' Этот класс даже не существует. Ваша переменная textInput всегда будет нулевой.   -  person Michelangelo    schedule 04.03.2020


Ответы (1)


Я предполагаю, что следующее должно соответствовать вашим требованиям:

Всякий раз, когда нажимается переключатель, функция события выполняет итерацию по всем значениям текстового ввода и либо устанавливает их атрибут required в 'required', либо удаляет его, в зависимости от того, установлен переключатель с value='inHome' или нет.

const qsa=s=>[...document.querySelectorAll(s)];

const home=qsa('.radio-group [value=inHome]')[0],
      inps=qsa('.row input[type=text]');

qsa('.radio-group')[0].addEventListener('click',e=>{
if(e.target.type=='radio')
  inps.forEach(ti=>ti[(home.checked?'set':'remove')+'Attribute']('required','required'));
});
<form><div class="col-6 radio-group"> <b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
 <label><input value="location" name="F429_backupAtLocRadio" type="radio" required="">
Location</label>
 <label><input value="hub" name="F429_backupAtLocRadio" type="radio">Hub</label>
 <label><input value="inHome" name="F429_backupAtLocRadio" class="inHome" type="radio">In Home </label></div>
 <div class="row"> <div class="col-3"> <span style="font-size: 11pt;">Model <br>
 <input id="backupModel" class="backupModel inHome" name="F429_backupModel" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">Serial# <br>
 <input id="F429_backupSerial" class="F429_backupSerial inHome" name="F429_backupSerial" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">Hours<br>
 <input id="F429_backupPmDueCurrentHours" class="F429_backupPmDueCurrentHours inHome" name="F429_backupPmDueCurrentHours" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">PM due date<br>
 <input id="F429_backupPmDueDate" class="F429_backupPmDueDate inHome" name="F429_backupPmDueDate" type="text"> </span> </div>
 </div><input type="submit">
</div></form>

person Carsten Massmann    schedule 04.03.2020