フォーム入力チェックをJQueryでやってみた

植木祐介

2

★ 自己紹介

・仕事　秋葉原で分析寄りのエンジニア　マーケティングの商圏分析

・使っているもの　 Python, Ruby, GIS, R( 予定 )

・好きなもの　柑橘類全般

・ Rails 歴　 3 か月

図 1. お店の位置をプロットした図

図 2. ちょっと加工して熱いエリアを可視化

3

★ 今回やったこと　 => 入力チェック機能を JQuery で実装　

※ソースコード保管場所https://github.com/rokusyou/formcheck開発環境 :windows7,ruby2.1.9

4

★ View の記述　

フィールド入力

ラジオボタン

チェックボックス（複数 )

チェックボックス（単体 )

＊ここだけべた書き

5

★ 入力チェック（バリデーション )

・フォームなどでユーザーからの入力値を DB に保存する前に、その値を検証する仕組み。

・基本的にはサーバ側のモデル層で行うらしい。

・今回は Jquery を使ってクライアント側でバリデーション実行

クライアント サーバー

Jqueryを使ってクライアント側で実行！！

6

★ JQuery で実行するメリット・デメリット

・メリット View だけの修正で実装ができる。（コントローラ、モデルから独立して実装できる）

・デメリットクライアント側の設定次第で動作が変わる（ 例： クライアント側で Javascript が無効化されていると、動かない。）

Jquery( クライアント側 ) で軽くチェックして、モデル ( サーバ側 ) でガッツリチェックするのが王道！！

( 担当した案件が管理された環境化で実行されるアプリだったのでJquery だけでも問題は発生しなかった )

7

★ Jquery の設定

1. プラグインの導入jquery-ui.min.jsJquery.validate.js

2. チェックロジックの作成ファイル「 val.js 」を作成し、フォルダ「 asset/javascript 直下」に配置

「 val.js 」では① 入力規則② 注意文③ 注意文の表示場所これらを指定している

8

★ val.js の中身1. 入力規則

入力必須

要数値入力

最低一つチェック#interest10がチェックされていたら入力必須

9

★ val.js の中身2. 注意文

3. 注意文の表示場所

※正規表現の扱いに注意する（ Jqueryが勝手に正規表現に解釈するらしい。）

10

★ Turbolinks を止める

Rails4 からデフォルトになった turbolinks ではJquery.read や window.onload イベントが発生しない !!=> よって止めることに。

・手順 ①gemfile から 「 gem ‘turbolinks’ 」を削除 ②app/assets/javascripts/application.html.erb から 「 //= requre turbolinks 」を削除

これでうまくいくはず！！

11

★ 今回はここまで

・つぎは？　① Heroku に上げたい。　　チャレンジしてみたが、　　フォームがうまく動いてくれなかった。

　②モデル層でフォームチェックをやってみる　　

12

おしまい！！