Top > 開発ガイド > コンポーネント開発逆引きリファレンス > リアルタイムで入力チェックを行う

リアルタイムで入力チェックを行う

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

Realtime Validatorはフォームの入力値をリアルタイムで検証するライブラリです。
主な入力値チェックの条件はあらかじめ定義されており、独自条件を追加することも可能です。

イメージ

使い方

基本的な使い方

Realtime Validatorを利用するためには、以下の3種類のタグを全て記述する必要があります。

  • ページ全体を括るタグ
  • フォームを括るタグ
  • 個別のValidationを規定するタグ
  1. ページ全体をvalidate_pageで括ります。 
    <% validate_page do %>
.
.
.
<% end %>
  2. フォームをvalidate_formで括ります。

　　validate_formはフォームごとに記述してください。 

<% validate_form('button_id') do %>
  <form>
    .
    .
    .
    <input type="submit" id="button_id">
  </form>
<% end %>
  1. 個別の入力欄をvalidateで規定します。

　　validateで入力欄ごとにValidationを規定します。

<%= validate 'rubricks_user_name', [{:required => true}] %>
<%= validate ['min_value', 'max_value'], [{:required => true}, {:numeric_greater_than => {:min_field_id => 'min_value', :max_field_id => 'max_value'}}] %>

応用的な使い方

RealtimeValidatorは基本的に上記Railsヘルパを使って利用します。
しかし、ある程度以上動的なページを作成する際にはJavaScriptを直接叩く必要がある場合があります。

バリデーションのリフレッシュ

ユーザがテキスト入力をしなくても、再度バリデーションのリフレッシュをしたい場合は下記のようにします。画面全体のバリデーションがリフレッシュされます。 

<script type="text/javascript">
  rubricks.common.Validator.refresh();
</script>

ある特定の入力欄のバリデーションのみをリフレッシュする場合は下記のようにして下さい。 

<script type="text/javascript">
  rubricks.common.Validator.refresh_by_id('input_field_id');
</script>

複数ボタンの指定

validate_formで指定するボタンのIDは配列で複数指定することが可能です。 

<% validate_form(['button_id', 'second_button_id']) do %>
  <form>
    .
    .
    .
    <input type="submit" id="button_id">
    <input type="submit" id="secont_button_id">
  </form>
<% end %>

API

validate(css_id, options = [])

  • 個別のチェック条件を指定するヘルパです。
引数必須初期値型説明
css_id○-StringまたはArrayValidationをかけたい入力欄のDOM ID
options○-Array下記「オプション」を参照してください。

オプション

キー 必須 初期値 型 説明
:required - - Hash 必須入力チェック
　:required => true
　:required => {:msg => '入力は必須です。'}
:length - - Hash 文字列の文字数制限チェック
　:length => '1..10'
　:length => {:value => '1..10', :msg => '1文字～10文字で入力して下さい。'}
　:length => {:value => '0..0,4..8', :msg => '4文字～8文字で入力して下さい。'}
　:length => {:value => '1..10', :smart => true, :msg => '1文字～10文字で入力して下さい。(全角は2文字換算)'}
:numeric - - Hash 数値チェック
　:numeric => true
　:numeric => {:msg => '整数で入力して下さい。'}
　:numeric => {:msg => '数値で入力して下さい。', :allow_decimal => true}
　:numeric => {:msg => '数値で入力して下さい。', :allow_nil => true}
:numeric_span - - Hash 整数の範囲チェック
　:numeric_span => '1..100'
　:numeric_span => {:value => '1..100', :msg => '1～100の間で入力して下さい。'}
:half_char - - Hash 半角チェック
　:half_char => true
　:half_char => {:msg => '半角文字で入力して下さい。'}
:kana - - Hash かなチェック
　:kana => true
　:kana => {:msg => 'ひらがなで入力して下さい。'}
:email - - Hash メールフォーマットチェック
　:email => true
　:email => {:msg => 'メールアドレスを入力して下さい。'}
:url - - Hash URLフォーマットチェック
　:url => true
　:url => {:msg => 'メールアドレスを入力して下さい。'}
:date - - Hash 日付フォーマットチェック
　:date => true
　:date => {:msg_format => "![#{hl('_Common_Date_Format')}]", :msg_invalid_date => '存在しない日付です。'}
:time - - Hash 時刻フォーマットチェック
　:time => true
　:time => {:msg_format => "![#{hl('_Common_Time_Format')}]", :msg_invalid_date => '存在しない時刻です。'}
:regexp - - Hash 正規表現チェック
　:regexp => {:value => '/!^[a-zA-Z0-9]+$/', :msg => '半角英数字で入力して下さい。'}
:numeric_greater_than - - Hash 数値の大小チェック(双方のinputボックスに指定する)
　:numeric_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '数値の前後関係が不正です。'}
:date_greater_than - - Hash 日付の大小チェック(双方のinputボックスに指定する)
　:date_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '日付の前後関係が不正です。'}
:time_greater_than - - Hash 時刻の大小チェック(双方のinputボックスに指定する)
　:time_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '時刻の前後関係が不正です。'}
:date_time_greater_than - - Hash 日時の大小チェック(双方のinputボックスに指定する)
　:date_time_greater_than => {:min_date_id => 'sample_min_date', :max_date_id => 'sample_max_date', :min_time_id => 'sample_min_time', :max_time_id => 'sample_max_time', :msg => '日時の前後関係が不正です。'}
:equals - - Hash 確認入力チェック(双方のinputボックスに指定する)
　:equals => {:node_id => 'input_1', :msg => '確認入力が一致しません。'}
:checkbox_count - - Hash チェックボックスの選択数チェック
　:checkbox_count => {:less_than => 1, :form_name => 'form_id'}
:ajax - - Hash 非同期通信チェック(サーバ側でtrue/falseを判定できる)
　:ajax => {:path => url_for(:controller => '/system/sample', :action => 'test'), :param_id => 'form_object_id'}
　:ajax => {:path => url_for(:controller => '/system/sample', :action => 'test'), :param_id => 'id1,id2,id3'}
　:ajax => {:path => url_for(:controller => '/system/sample', :action => 'test'), :param_id => 'form_object_id', :msg => 'ユーザIDは既に使用されています。', :check_msg => '通信中...'}
　:ajax => {:path => url_for(:controller => '/system/sample', :action => 'test'), :param_id => 'form_object_id', :allow_nil => true}
　コントローラにrender_ajax_validation(true/false)を記述することでバリデーションの成否を決定する
:enforce_parent
:enforce_child		 - - Hash 関連付け(親フォームオブジェクトの値が正規表現指定に合致すれば子の判定は実施しない)
　:enforce_parent => {:children_id => 'child_id_1,child_id_2,child_id_3'}
　:enforce_child => {:parent_id => 'parent_id', :regexp => '/!^[a-zA-Z0-9]+$/'}
:fieldset_count - - Hash チェックボックス・ラジオボタンの選択数チェック
　※判定対象のエレメントはfieldsetタグで括る
　※このバリデーションと、他のバリデーションを同一のvalidate指定に入れ込むことはできない
<fieldset id='check_group'>
  <input type='checkbox' id='check1' name='check1' />
  <input type='checkbox' id='check2' name='check2' />
  <input type='checkbox' id='check3' name='check3' />
</fieldset>

<%= validate 'check1', [{:fieldset_count => {:less_than => 2, :fieldset => 'check_group'}}] %>
<%= validate 'check2', [{:fieldset_count => {:less_than => 2, :fieldset => 'check_group'}}] %>
<%= validate 'check3', [{:fieldset_count => {:less_than => 2, :fieldset => 'check_group'}}] %>
:custom - - Hash 独自の入力チェックを指定。
　※独自の入力チェックを行うjavascript関数を指定する。
　※関数には、入力チェック対象となるDOM要素が引数として渡される。
　※入力がOKであればtrueを、そうでなければ画面に表示するメッセージを返す。
　:function => function(element) { if (element.value.match(/\D/)) { return true; } else { return "数値以外は入力しないで下さい。"; }}

Attachments