Как динамически добавить обязательный элемент HTML в форму, используя javascript?

Question

В форме, которую я делаю, есть раздел, в котором пользователям необходимо указать количество людей в их семье. После того, как они предоставят это, форма генерирует достаточно полей ввода, чтобы пользователь мог ввести информацию для каждого члена семьи.

У меня проблемы с тем, что ни один из атрибутов, которые я пытаюсь применить к элементу ввода, на самом деле не работает.

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

Параметр that относится к вводу, в котором пользователь вводит количество людей в своей семье.

А вот соответствующий 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>

Элемент отображается как должен, и отправляется с формой, когда пользователь нажимает кнопку отправки, но шаблон регулярного выражения и обязательные атрибуты не применяются.

Answer 1

в addHouseMembers(that) значение that является строкой, а не числом, и вы должны проверить, можно ли перевести значение в целочисленное значение.

используйте «onchange» Событие в поле ввода household-size не является хорошей идеей, потому что это событие вызывается каждый раз, когда di git от введенного числа, что приводит к стиранию и полной перезаписи family-input-container part

Я представляю, что вы ищете что-то подобное?

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>