BootstraoValidatorのみに関わらず、Javascriptのイベントの設定(ここでいうvalidation)は、javascriptが読み込まれた際に対象のDOMにセットされます。
なので、Javascriptが読み込み終わった後に追加されたDOMにはvalidationはセットされません。
例えば最初がこの状態で、
html
1<div class="form-group has-feedback">
2 <input type="text" class="form-control" required="">
3 <div class="help-block with-errors"></div>
4</div>
その後、JavaScriptが読み込まれ、DOMに対してValidationをかける
という処理を行います。
(bootstrapValidatiorをよく知らないので間違っていたらスイマセン)
js
1 $('.form-group').bootstrapValidator({})
この時、validationがかかっているのはinputのみです。
html
1<div class="form-group has-feedback">
2 <input type="text" class="form-control" required=""> /*ここにvalidationがかかっている*/
3 <div class="help-block with-errors"></div>
4</div>
さて、この後にJavascriptか何かでinputタグを追加しました。
その場合、すでに先ほどのValidationをかける
という処理が終わっているので、追加されたinputタグにはvalidationをかける処理は設定されません。
html
1<div class="form-group has-feedback">
2 <input type="text" class="form-control" required=""> /*ここにvalidationがかかっている*/
3 <input type="text" class="form-control" required=""> /* 新規に追加されたものにはvalidationイベントは追加されていない */
4 <div class="help-block with-errors"></div>
5</div>
なので、今回動的に生成したものに対してvalidationがかかっていないものと思われます。
これはjqueryやpureなJavascriptでイベントを設定する際も同じです。
新しく追加された要素には最初にセットしたイベントが付与されており、新しく追加された要素のclickイベントが発生しないよーという風になることがあります。
この場合、対処法としては2つあります。
①動的に追加した後に再度validationの設定( $('.form-group').bootstrapValidator({})
)を呼び出す
②親要素にイベントを付与する
ただ、bootstrapValidatorに②が効くのかわからないので①を試してみてはいかがでしょうか。
長くなりましたが参考になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/11 08:09