Making additional elements required

Question

I am creating a form submission; some of the elements are required so are not. I have a checkbox in the form that will make additional elements visible if the box is checked. I am using htmland javascript.

The problem I am currently having is that when I hit submit the elements that are invisible are still required (I will attach my code). I want to make it where the additional elements are required only when the box is checked.
I am not sure how to write the javascriptor jqueryto make this possible.

Any help is appreciated! Thank you.

function addPerson(box) {
  var chboxs = document.getElementsByName("person");
  var vis = "none";
  for (var i = 0; i < chboxs.length; i++) {
    if (chboxs[i].checked) {
      vis = "block";
      break;
    }
  }
  document.getElementById(box).style.display = vis;
}

<html>
<form>
  *Name: <input size=27 type="text" name="mfname" required><br> *Email: <input size=27 type="text" name="mfname" required><br> *Date: <input size=27 type="text" name="mfname" required><br>

  <input type="checkbox" name="person" value="on" onclick="addPerson('person')">Add another person<br>

  <div id="person" style="display:none">
    *Name: <input size=27 type="text" name="mfname" required><br> *Email: <input size=27 type="text" name="mfname" required><br> *Date: <input size=27 type="text" name="mfname" required><br>
  </div>

  <button type="submit" value="Submit">Submit</button>
</form>

</html>

See here: https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript — Jeff Matthews, Jan 29 '18 at 21:16

score 0 · Answer 1 · answered Jan 29 '18 at 21:20

0

For each element (or children) you're hiding you can do

yourElement.removeAttribute('required');

and when showing

yourElement.setAttribute('required',true);

answered Jan 29 '18 at 21:20

guigoz

674
4
21

Making additional elements required

1 Answers1