Rails上でバリデーションをJQueryを使って実装しました。 簡単に手順を説明。

1. フォーム入力チェックを
JQueryでやってみた
植木祐介

2. 2
★ 自己紹介
・仕事
秋葉原で分析寄りのエンジニア
マーケティングの商圏分析
・使っているもの
Python, Ruby, GIS, R(予定)
・好きなもの
柑橘類全般
・Rails歴
3か月
図1.お店の位置をプロットした図
図2.ちょっと加工して熱いエリアを可視化

3. 3
★ 今回やったこと
=>入力チェック機能をJQueryで実装
※ソースコード保管場所
https://github.com/rokusyou/formcheck
開発環境:windows7,ruby2.1.9

4. 4
★ Viewの記述
フィールド入力
ラジオボタン
チェックボックス
（複数)
チェックボックス
（単体)
＊ここだけべた書き

5. 5
★ 入力チェック（バリデーション)
・フォームなどでユーザーからの入力値をDBに保存する前に、
その値を検証する仕組み。
・基本的にはサーバ側のモデル層で行うらしい。
・今回はJqueryを使ってクライアント側でバリデーション実行
クライアント サーバー
Jqueryを使ってクライアント側で実行！！

6. 6
★ JQueryで実行するメリット・デメリット
・メリット
Viewだけの修正で実装ができる。
（コントローラ、モデルから独立して実装できる）
・デメリット
クライアント側の設定次第で動作が変わる
（ 例： クライアント側でJavascriptが無効化されていると、動かな
い。）
Jquery(クライアント側)で軽くチェックして、
モデル(サーバ側)でガッツリチェックするのが王道！！
(担当した案件が管理された環境化で実行されるアプリだったので
Jqueryだけでも問題は発生しなかった)

7. 7
★ Jqueryの設定
1. プラグインの導入
jquery-ui.min.js
Jquery.validate.js
2. チェックロジックの作成
ファイル「val.js」を作成し、
フォルダ「asset/javascript直下」に配置
「val.js」では
①入力規則
②注意文
③注意文の表示場所
これらを指定している

8. 8
★ val.jsの中身
1.入力規則
入力必須
要数値入力
最低一つチェック
#interest10がチェックされていたら
入力必須

9. 9
★ val.jsの中身
2.注意文
3.注意文の表示場所
※正規表現の扱いに注意する
（Jqueryが勝手に正規表現に解釈するらしい。）

10. 10
★ Turbolinksを止める
Rails4からデフォルトになったturbolinksではJquery.readや
window.onloadイベントが発生しない!!
=> よって止めることに。
・手順
①gemfileから 「gem ‘turbolinks’」を削除
②app/assets/javascripts/application.html.erbから
「 //= requre turbolinks 」を削除
これでうまくいくはず！！

11. 11
★ 今回はここまで
・つぎは？
①Herokuに上げたい。
チャレンジしてみたが、
フォームがうまく動いてくれなかった。
②モデル層でフォームチェックをやってみる

12. 12
おしまい！！