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 betype="text"
.- I think you’ve added
multiple
onselect
by mistake, it doesn’t make any sense here. - I’ve also made the initial option for
select
to beSelect Age
withvalue=""
, so now you don’t needrequired
onparent_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>