Если выбран переключатель, необходимо заполнить несколько текстовых полей для проверки формы - PullRequest
Новая
       28

Если выбран переключатель, необходимо заполнить несколько текстовых полей для проверки формы

0 голосов
/ 04 марта 2020

У меня есть группа из 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>

1 Ответ

1 голос
/ 04 марта 2020

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

При каждом нажатии радиокнопки функция события выполняет итерацию по всем значениям ввода текста и либо устанавливает их атрибут 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>
...