.validator('update') не работает для динамически добавляемых полей

Question

Я использую Bootstrap (плагин): валидатор начальной загрузки validator.js v0.11.9 для проверки полей в проекте Python (Python версии 3.6 и Django версии 1.11). На кнопкуclickЯ добавил пару полей в форму, используя jquery -

JQuery:

 $("#button1Id").click(function(){
    $("#divInsideFormId").append('filed1-selectoption, field2-datepicker, field3-textbox');             
});

Согласно полям валидатора документов

По умолчанию валидатор проверяет только те поля, которые присутствуют при инициализации плагина. Если ваша форма имеет динамический набор полей, вам нужно будет позвонить$(...).validator('update') сообщить плагину, что набор проверяемых полей изменился.

Я попробовал следующее -

$("#button1Id").click(function(){
    $("#divInsideFormId").append('filed1-selectoption, field2-datepicker, field3-textbox');
    $("#formId").validator('update');           
});

Это не сработало. Я тоже пробовал - $("#divInsideFormId").append(...).validator('update');

Даже это не работает.

Кто-нибудь может подсказать, что не так с моим кодом или я что-то упустил?

Answer 1

Это рабочий фрагмент:

$("#button1Id").click(function(){

    var html = '<label for="inputName" class="control-label">New numeric field</label><input type="number" class="form-control" id="inputNum" placeholder="new num field" required>';
    $("#divInsideFormId").append(html);
    $("#formId").validator('update');           
});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>


<form id="formId" data-toggle="validator" role="form">
  <div id="divInsideFormId" class="form-group">
  </div>

  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
  </div>
  <div class="form-group has-feedback">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <div class="help-block with-errors">Hey look, this one has feedback icons!</div>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="help-block">Minimum of 6 characters</div>
      </div>
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
        <div class="help-block with-errors"></div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="underwear" required>
        Boxers
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="underwear" required>
        Briefs
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
        Check yourself
      </label>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button id="button1Id" type="button" class="btn btn-default">Add field</button>
  </div>
</form>

или эквивалентный jsfiddle: https://jsfiddle.net/beaver71/m90m178s/