.validator（ '更新'）は、動的に追加されたフィールド

Question

のために働いていない私は、ブートストラップ（プラグイン）を使用しています：Pythonプロジェクト（Pythonのバージョン3.6とDjangoバージョン1.11）でのフィールド検証のためv0.11.9bootstrap validatorをvalidator.js。ボタンclickに私はjqueryのを使用して、フォームにフィールドのカップルを追加した -

のjQueryを：

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

デフォルトでドキュメントvalidator fields

によると、バリデータはそれだけでフィールドを検証しますプラグインが初期化されたときに存在します。フォームに動的なフィールドセットがある場合は、$(...).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/