Top > 開発ガイド > コンポーネント開発Tips集 > 入力チェック

入力チェック(Realtime Validator)

対象バージョン

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

ヘルパータグの種類

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

  1. ページ全体を括るタグ
  2. フォームを括るタグ
  3. 個別のValidationを規定するタグ

1. ページ全体を括るタグ

rhtmlファイル全体を以下のタグで括ります。 

<% validate_page do %>
.
.
.
<% end %>

2. フォームを括るタグ

formタグ毎に以下のタグで括ります。 

<% validate_form('button_id') do %>
  <form>
    .
    .
    .
    <input type="submit" id="button_id">
  </form>
<% end %>

3. 個別のValidationを規定するタグ

validate(id, options = [])
Examples:
<%= 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'}}] %>
Options:
:required 必須入力チェック
  • :required => true
  • :required => {:msg => '入力は必須です。'}
:length 文字列の文字数制限チェック
  • :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 数値チェック
  • :numeric => true
  • :numeric => {:msg => '整数で入力して下さい。'}
  • :numeric => {:msg => '数値で入力して下さい。', :allow_decimal => true}
  • :numeric => {:msg => '数値で入力して下さい。', :allow_nil => true}
:numeric_span 整数の範囲チェック
  • :numeric_span => '1..100'
  • :numeric_span => {:value => '1..100', :msg => '1～100の間で入力して下さい。'}
:half_char 半角チェック
  • :half_char => true
  • :half_char => {:msg => '半角文字で入力して下さい。'}
:kana かなチェック
  • :kana => true
  • :kana => {:msg => 'ひらがなで入力して下さい。'}
:email メールフォーマットチェック
  • :email => true
  • :email => {:msg => 'メールアドレスを入力して下さい。'}
:url URLフォーマットチェック
  • :url => true
  • :url => {:msg => 'メールアドレスを入力して下さい。'}
:date 日付フォーマットチェック
  • :date => true
  • :date => {:msg_format => "[#{hl('_Common_Date_Format')}]", :msg_invalid_date => '存在しない日付です。'}
:time 時刻フォーマットチェック
  • :time => true
  • :time => {:msg_format => "[#{hl('_Common_Time_Format')}]", :msg_invalid_date => '存在しない時刻です。'}
:regexp 正規表現チェック
  • :regexp => {:value => '/^[a-zA-Z0-9]+$/', :msg => '半角英数字で入力して下さい。'}
:numeric_greater_than 数値の大小チェック(双方のinputボックスに指定する)
  • :numeric_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '数値の前後関係が不正です。'}
:date_greater_than 日付の大小チェック(双方のinputボックスに指定する)
  • :date_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '日付の前後関係が不正です。'}
:time_greater_than 時刻の大小チェック(双方のinputボックスに指定する)
  • :time_greater_than => {:min_field_id => 'sample_min_field', :max_field_id => 'sample_max_field', :msg => '時刻の前後関係が不正です。'}
:date_time_greater_than 日時の大小チェック(双方の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 確認入力チェック(双方のinputボックスに指定する)
  • :equals => {:node_id => 'input_1', :msg => '確認入力が一致しません。'}
:checkbox_count チェックボックスの選択数チェック
  • :checkbox_count => {:less_than => 1, :form_name => 'form_id'}
:ajax 非同期通信チェック(サーバ側で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		 関連付け(親フォームオブジェクトの値が正規表現指定に合致すれば子の判定は実施しない)
  • :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 チェックボックス・ラジオボタンの選択数チェック
※判定対象のエレメントは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 独自の入力チェックを指定。
※独自の入力チェックを行うjavascript関数を指定する。
※関数には、入力チェック対象となるDOM要素が引数として渡される。
※入力がOKであればtrueを、そうでなければ画面に表示するメッセージを返す。
  • :function => function(element) { if (element.value.match(/\D/)) { return true; } else { return "数値以外は入力しないで下さい。"; }}

４. JavaScriptでの操作

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

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

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

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

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

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

５. その他 Tips

5.1 複数ボタンの指定

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 %>