I have two HTML form fields on my application one displays a dropdown for users to select if the user is over 18,

The second field requires a parents name.

I want to make the parent field name required if the user is under 18,

Here is my current code for the appropriate form parts,

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;
  }
}
<div class="form-group">
  <label for="over_18">Over 18? </label>
  <select name="over_18" id="over_18" class="form-control" required multiple>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

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

I was thinking about using a function like the below but not sure how to use document.getElementById(‘over_18’).value with the value being ‘no’ from the over_18 entry.

Any help would be appreciated.

3

You can use something like this :

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

2

I would add an onchange to your first input

<div class="form-group">
    <label for="over_18">Over 18? </label>
    <select name="over_18" id="over_18" class="form-control" required onchange="updateRequirements()">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>

And then use your function

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

I tried to run your code but nothing happens because:
1.you need to add onchange attribute to your select tag or you can set this from javascript: https://www.w3schools.com/jsref/event_onchange.asp

                <select name="over_18" id="over_18" class="form-control" onchange="updateRequirements()" required multiple>

2. Instead of doccument use documnet and try something like this:

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

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’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();
});
<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" required>
  </div>
  <button type="submit">Submit</button>
</form>

2