条件により表示非表示を切り替える項目のForm Validation

Fomantic UIで、Form Validationをしていて、条件によって動的に項目の表示非表示を切り替える必要が出てきて、定義しているruleが生きたままだと、非表示になった項目にもValidationが行なわれて嬉しくないという状況が発生して困ってました。

試行錯誤した結果なんとか、Fomantic UIの外から設定ができたので、メモします。

Fomantic UIが、validation対象のフィールドを探すためのセレクターが、設定で変更できます。デフォルトでは、以下になってるので、input, textarea, selectタグを対象にするところを、

        field: 'input, textarea, select',

:visibleで、表示中のものを対象とするように指定します。

        field: 'input:visible, textarea:visible, select:visible',

これだけでは、非表示にされた項目が動的に対象から外れてくれなかった。処理対象がキャッシュされているようなので、表示非表示を切り替えた直後に、refreshしてキャッシュをクリアしてあげると、再度対象を探してくれるようです。

refreshのやり方は、以下。(ドキュメントに載ってなくてソースを見てわかった)

      $('.ui.form').form('refresh'); //可視状態が変わったので、セレクターキャッシュをリフレッシュする。

以下、サンプルです。

  $('.ui.form')
    .form({
      inline: true,
      fields: {
        family_name: {identifier: 'data[XXXModel][family_name]', rules:[
          {type: 'empty', prompt: '氏を入力してください。'},
          {type: 'maxLength[32]', prompt: '32文字以内で入力してください。'},
        ]},
        first_name: {identifier: 'data[XXXModel][first_name]', rules:[
          {type: 'empty', prompt: '名を入力してください。'},
          {type: 'maxLength[32]', prompt: '32文字以内で入力してください。'},
        ]},
      },
      selector: {
        field: 'input:visible, textarea:visible, select:visible',
      },
  });
  $('.ui.form').each(function(){
    var form = $(this);
    var update_fields = function(){
      // 任意のラジオボタンなどによって、表示非表示を切り替える
      // 省略
 
      form.form('refresh'); //可視状態が変わったので、セレクターキャッシュをリフレッシュする。
    };
    $('input[name="data[XXXModel][job]"]').on('change', update_fields);
    update_fields();
  });

週記くらい

条件により表示非表示を切り替える項目のForm Validation

コメントする