Skip to content
Advertisement

How to make an input required based on the value of another input?

I have two HTML form fields in my application, one displays a dropdown for users to select if they are over 18 and the second field is for parent’s name.

I want to make the parent_name field required only if the user is under 18. Here’s my current code for the appropriate form parts.

<div>
  <label for="over_18">Over 18?</label>
  <select id="over_18" required multiple>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div class="form-group">
  <label>Parent Name</label>
  <input type="parent_name" id="parent_name" required>
</div>

I’ve created the following function so far, but I’m unable to understand how to use it.

function updateRequirements() {
  var over_18 = document.getElementById('over_18').value;
  if (over_18 = 'No') {
    doccument.getElementById('parent_name').required = true;
  } else {
    doccument.getElementById('parent_name').required = false;
  }
}

Update:

How to achieve the same result if the first input is of type date? So, now the second input is required only if the age provided in the first input is less than 18.

Advertisement

Answer

You can update the required attribute of the parent_name input every time the over_18 selection changes.

Few notes:

  • type="parent_name" is invalid, it should be type="text".
  • I think you’ve added multiple on select by mistake, it doesn’t make any sense here.
  • I’ve also made the initial option for select to be Select Age with value="", so now you don’t need required on parent_name in your HTML.

const select = document.getElementById("over_18");
const parentInput = document.getElementById("parent_name");
const form = document.querySelector("form");

select.addEventListener("change", (e) => {
  if (e.target.value === "No") {
    parentInput.required = false;
  } else {
    parentInput.required = true;
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Submitted");
});
<form>
  <div>
    <label for="over_18">Over 18? </label>
    <select id="over_18" required>
      <option value="">Select Age</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <div>
    <label for="parent_name">Parent Name</label>
    <input type="input" id="parent_name">
  </div>
  <button type="submit">Submit</button>
</form>

Update based on OP’s comment:

If age is a date input:

  • Calculate if the age is above 18 by comparing the year, month and date of the provided date with the current date.
  • Then, toggle the required attribute accordingly.

const ageInput = document.getElementById("age");
const parentInput = document.getElementById("parent_name");
const form = document.querySelector("form");

ageInput.addEventListener("change", (e) => {
  const date = new Date(e.target.value),
    birthYear = date.getFullYear(),
    birthMonth = date.getMonth(),
    birthDate = date.getDate(),
    currYear = new Date().getFullYear(),
    currMonth = new Date().getMonth(),
    currDate = new Date().getDate(),
    years = currYear - birthYear,
    isAdult =
      years > 18 ||
      (years === 18 && currMonth > birthMonth) ||
      (years === 18 && currMonth === birthMonth && currDate >= birthDate);

  console.log("Is Adult?", isAdult);

  if (isAdult) {
    parentInput.required = false;
  } else {
    parentInput.required = true;
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Submitted");
});
<form>
  <div>
    <label for="age">Age</label>
    <input type="date" id="age" required>
  </div>
  <div class="form-group">
    <label for="parent_name">Parent Name</label>
    <input type="text" id="parent_name">
  </div>
  <button type="submit">Submit</button>
</form>
Advertisement