2016-03-27 11 views
1

フォーム検証にbootstapバリデータライブラリを使用しています。Jquery:ダイナミックに追加された要素で動作しないブートストラップフォーム検証ライブラリ

//validate when submit button is clicked. 
    $('#passenger-form').bootstrapValidator({ 
    fields: { 
     email: { 
        group: '.col-xs-6', 
        validators: { 
         notEmpty: { 
          message: 'Email required' 
         } 

        } 
       } 
      //rest of the rules here 
    } 
    }); 

いつか私のフォームを動的に追加された(ユーザによって行われたいくつかの条件に基づいて)、その時の検証では動作しません。

フォームが動的に追加されると、検証ルールは機能しません。 私はこの問題を解決するためにjquery.onイベントを使用することができますが、私のケースではどのように使用できますか?

+0

ライブラリのドキュメントへのリンクを共有することができます。 –

+0

ここにライブラリhttps://github.com/nghuuphuoc/bootstrapvalidator –

+0

もあります。ライブラリをアップグレードすると、必要なものが得られます。http://formvalidation.io/examples/adding-dynamic-field/ –

答えて

1

プラグインを使用しているため、jQuery.onがこの文脈であなたを助けないことがあります。

BootrapValidatorのウェブサイトを見ると、FormValidationに置き換えられているようです。

バリデータをバインドする関数を作成し、フォーム要素を動的に追加するときにその関数を呼び出すのが最善の方法です。例えば

は:ので、ここで

function bindForm() { 
    //validate when submit button is clicked. 
    $('#passenger-form').bootstrapValidator({ 
     fields: { 
      email: { 
       group: '.col-xs-6', 
       validators: { 
        notEmpty: { 
         message: 'Email required' 
        } 
       } 
      } 
      //rest of the rules here 
     } 
    }); 
} 
//call it by default if the form is present 
bindForm(); 

//call it when a user generates an event 
function userGeneratedEvent() { 
    //do whatever it is that this event is for 
    //add the form as described in the question 
    bindForm(); 
} 
+0

私のバリデーターをバインド –

+0

@BlessanKurienはい、例が追加されました。 –

+0

それを試してみましょう –

1

there is no documentation available in the link you provided, I think the plugin is closed.

[OK]を考えです。プラグインが適用された後に動的に追加された要素がDOMに入っているため、プラグインはこれらの要素の手掛かりがありません。新しい動的要素を追加するときに、検証プラグインを再適用する必要があります。または、プラグインを適用しない方が良いでしょうが、フォームの送信時にフォーム送信イベントをキャッチし、プラグインを適用します。オーバーヘッドを増やすことなくこれを単純化する必要があります。

関連する問題