Make HTML input required dependent on whether shown or not

Question

I have a section on a form where the user marks the status and if the user marks the status as 'Archived' it will show a div (using Javascript) and asks for the reason. How do I make this box required but only if it's shown? For example if the users selects another status which is not 'Archived' then the box won't be required.

Choose Status

function admSelectCheck(nameSelect) {
  console.log(nameSelect);
  if (nameSelect) {
    admOptionValue = document.getElementById("admOption").value;
    if (admOptionValue == nameSelect.value) {
      document.getElementById("admDivCheck").style.display = "block";
    } else {
      document.getElementById("admDivCheck").style.display = "none";
    }
  } else {
    document.getElementById("admDivCheck").style.display = "none";
  }
}

<div class="input-field col s12 m6">
  <select name="fdstatus" onchange="admSelectCheck(this);">
    <option value="<?= $cst['cst_status']; ?>" selected>
      <?= $cst['cst_status']; ?>
    </option>
    <option value="Prospect">Prospect</option>
    <option value="Appointment Booked">Appointment Booked</option>
    <option value="Test Drive Booked">Test Drive Booked</option>
    <option value="Proposal Offered">Proposal Offered</option>
    <option id="admOption" value="Archived">Archived</option>
    <option value="Deal Won">Deal Won</option>
    <option value="Deal Lost">Deal Lost</option>
  </select>
  <label>Customer Status</label>
</div>
<!-- If 'Archive' show -->
<div id="admDivCheck" style="display:none;" class="row">
  <div class="input-field col s12 m6">
    <input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
    <label for="fdstatusArchiveR">Reason for archive</label>
  </div>

mplungjan · Answer 1 · 2020-09-25T13:09:58.350

I added a class of hide to the div, an ID to the select and removed the inline event handler as recommended.

The script adheres to the DRY principle (Don't Repeat Yourself)

document.getElementById("fdstatus").addEventListener("change", function() {
  const val = this.value; // select value
  const admOptionValue = document.getElementById("admOption").value; // option value of ID
  const show = val === admOptionValue; // boolean
  document.getElementById("admDivCheck").classList.toggle("hide", !show);
  document.getElementById("fdstatusArchiveR").required = show;
});

.hide {
  display: none;
}

<form>
  <div class="input-field col s12 m6">
    <select name="fdstatus" id="fdstatus">
      <option value="" selected>Please select</option>
      <option value="Prospect">Prospect</option>
      <option value="Appointment Booked">Appointment Booked</option>
      <option value="Test Drive Booked">Test Drive Booked</option>
      <option value="Proposal Offered">Proposal Offered</option>
      <option id="admOption" value="Archived">Archived</option>
      <option value="Deal Won">Deal Won</option>
      <option value="Deal Lost">Deal Lost</option>
    </select>
    <label>Customer Status</label>
  </div>
  <!-- If 'Archive' show -->
  <div id="admDivCheck" class="row hide">
    <div class="input-field col s12 m6">
      <input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
      <label for="fdstatusArchiveR">Reason for archive</label>
    </div>
  </div>
  <input type="submit" value="Test if required" />
</form>

score 0 · Accepted Answer · answered Sep 25 '20 at 12:56

Inside the admSelectCheck function toggle the required on the input:

function admSelectCheck(nameSelect) {
  console.log(nameSelect);
  if (nameSelect) {
    admOptionValue = document.getElementById("admOption").value;
    if (admOptionValue == nameSelect.value) {
      document.getElementById("admDivCheck").style.display = "block";
      document.getElementById('fdstatusArchiveR').required = true;
    } else {
      document.getElementById("admDivCheck").style.display = "none";
      document.getElementById('fdstatusArchiveR').required = false;
    }
  } else {
    document.getElementById("admDivCheck").style.display = "none";
    document.getElementById('fdstatusArchiveR').required = false;
  }
}

Make HTML input required dependent on whether shown or not

2 Answers2