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

user_18408490 0
Viewed 105

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.

html javascript
4 Answers

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');
        }
    }
user_149584680

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>

user_117193140

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);
        }
    }

user_190857270

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");
        }
    }
user_190843430
Related