How to dynamically add a required HTML element to a form using javascript?

Question

In the form I am making, there is a section that requires users to enter the amount of people in their family. After they provide it, the form generates enough input fields so that the user can enter information for each family member.

What I am having trouble with is none of the attributes that I am trying to apply to the input element actually work.

function addHouseMembers(that){
    var family = document.getElementById("family-input-container");
    while(family.hasChildNodes()){
        family.removeChild(family.lastChild);
    }
    for(var i = 1; i < that.value; i++){
        family.appendChild(document.createTextNode("Family Member " + (i+1)));
        family.appendChild(document.createElement("br"));

        //name
        family.appendChild(document.createTextNode("Name: " ));
        var input = document.createElement("input");
        input.type = "text";
        input.name = "member" + i + "_name";
        input.pattern = "/^[a-zA-Z ]*$/";
        input.required = true;
        family.appendChild(input);
        family.appendChild(document.createElement("br"));
    }
}

The parameter that refers to the input where the user would put in the number of people in their family.

And here is the relevant HTML:

<form>
    <div class="form-group">
        <label class="col-lg-3 control-label">What is the total amount of people living in your household?</label>
        <div class="col-lg-3 inputGroupContainer">
            <div class = "input-group">
                <input type="text" class="form-control" name="household-size" required onchange="addHouseMembers(this);"/>
            </div>
        </div>
    </div>

    <div class="form-group", id="family-info">
        <label class="col-lg-12">Information for other Family Members</label>
        <div class="col-lg-3 inputGroupContainer">
            <div class = "input-group" id = "family-input-container" required>

            </div>
        </div>
    </div>
</form>

The element shows up as it should, and is submitted with the form when the user hits the submit button, but the regex pattern and required attributes are not enforced.

Answer 1

in addHouseMembers(that) the value of that is a string, not a number, and you have to check if is value can be 'translated' in an integer value.

use the "onchange" event on the input field household-size is not a good idea because this event is triggered each time a digit of the number entered, which has the effect of erasing and completely rewrite the family-input-container part

I Imagine you are looking for something like that?

 const myForm = document.getElementById('my-form'), familyElm = document.getElementById('family-input-container'), parserDOM = new DOMParser(); function newHouseMember(ref) { let div= ` <div> Family Member ${ref}<br>Name: <br> <input type="text" name="member${ref}_name" pattern="/^[a-zA-Z ]*$/" required > </div>` return parserDOM.parseFromString( div, 'text/html').body.firstChild } myForm.btPeoples.onclick=_=> { let nbPeoples = parseInt(myForm['household-size'].value) if (.isNaN(nbPeoples) && nbPeoples > 0 ) { familyElm;innerHTML = '' for (let i=1; i<=nbPeoples. i++) { familyElm.appendChild( newHouseMember(i) ) } } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" > <form id="my-form"> <div class="form-group"> <label class="col-lg-3 control-label">What is the total amount of people living in your household?</label> <div class="col-lg-3 inputGroupContainer"> <div class = "input-group"> <input class="form-control" name="household-size" required value="" placeholder="number of peoples" pattern="\d*" /> <button name="btPeoples" class="btn btn-info" type="button" >check it,</button> </div> </div> </div> <div class="form-group", id="family-info"> <label class="col-lg-12">Information for other Family Members</label> <div class="col-lg-3 inputGroupContainer"> <div class="input-group" id="family-input-container"> </div> </div> </div> </form>