Submit Search
Upload
入力フォームチェックをJ queryでやってみた
•
Download as PPTX, PDF
•
0 likes
•
84 views
祐
祐介 植木
Follow
Rails上のバリデーションをJQueryを使って行いました。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 10
Download now
Recommended
入力フォームチェックをJ queryでやってみた
入力フォームチェックをJ queryでやってみた
yusuke ueki
ルビコンペレストロイカ〜RubyOnRailsにおけるCI改革〜
ルビコンペレストロイカ〜RubyOnRailsにおけるCI改革〜
TrinityT _
delayed_jobの自動再起動
delayed_jobの自動再起動
firewood
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
Yukihiko SAWANOBORI
運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用
真治 米田
PHPフレームワーク入門
PHPフレームワーク入門
Sho A
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
Jun-ichi Sakamoto
Recommended
入力フォームチェックをJ queryでやってみた
入力フォームチェックをJ queryでやってみた
yusuke ueki
ルビコンペレストロイカ〜RubyOnRailsにおけるCI改革〜
ルビコンペレストロイカ〜RubyOnRailsにおけるCI改革〜
TrinityT _
delayed_jobの自動再起動
delayed_jobの自動再起動
firewood
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
Yukihiko SAWANOBORI
運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用
真治 米田
PHPフレームワーク入門
PHPフレームワーク入門
Sho A
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
Jun-ichi Sakamoto
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
normalian
恋するJenkins
恋するJenkins
Hiroshi Nakao
JobScheduler Code Reading
JobScheduler Code Reading
Shinobu Okano
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Imamura Masayuki
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
Masanori Oobayashi
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
Yahoo!デベロッパーネットワーク
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
Redmineサーバ統合事例
Redmineサーバ統合事例
Yuuki Nara
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
第8回 福岡西区勉強会
第8回 福岡西区勉強会
Shinya Kinoshita
ボット開発でも DevOps! BotBuilder のテスト手法
ボット開発でも DevOps! BotBuilder のテスト手法
Kenichiro Nakamura
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
プログラマー
プログラマー
Kouhei Sutou
CodeIgniter入門
CodeIgniter入門
Sho A
More Related Content
Similar to 入力フォームチェックをJ queryでやってみた
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
normalian
恋するJenkins
恋するJenkins
Hiroshi Nakao
JobScheduler Code Reading
JobScheduler Code Reading
Shinobu Okano
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Imamura Masayuki
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
Masanori Oobayashi
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
Yahoo!デベロッパーネットワーク
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
Redmineサーバ統合事例
Redmineサーバ統合事例
Yuuki Nara
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
第8回 福岡西区勉強会
第8回 福岡西区勉強会
Shinya Kinoshita
ボット開発でも DevOps! BotBuilder のテスト手法
ボット開発でも DevOps! BotBuilder のテスト手法
Kenichiro Nakamura
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
プログラマー
プログラマー
Kouhei Sutou
CodeIgniter入門
CodeIgniter入門
Sho A
Similar to 入力フォームチェックをJ queryでやってみた
(20)
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
恋するJenkins
恋するJenkins
JobScheduler Code Reading
JobScheduler Code Reading
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
Redmineサーバ統合事例
Redmineサーバ統合事例
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
React meetup 3_eight
React meetup 3_eight
第8回 福岡西区勉強会
第8回 福岡西区勉強会
ボット開発でも DevOps! BotBuilder のテスト手法
ボット開発でも DevOps! BotBuilder のテスト手法
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
プログラマー
プログラマー
CodeIgniter入門
CodeIgniter入門
入力フォームチェックをJ queryでやってみた
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 ★ 入力チェック(バリデーション) ・フォームなどでユーザーからの入力値をDBに保存する前に、その値 を検証する仕組み。 ・基本的にはサーバ側のモデル層で行うらしい。 ・今回はJqueryを使ってクライアント側でバリデーション実行 クライアント サーバー Jqueryを使ってクライアント側で実行!!
5.
5 ★ JQueryで実行するメリット・デメリット ・メリット Viewだけの修正で実装ができる。 (コントローラ、モデルから独立して実装できる) ・デメリット クライアント側の設定次第で動作が変わる ( 例:
クライアント側でJavascriptが無効化されていると、動かない。) Jquery(クライアント側)で軽くチェックして、 モデル(サーバ側)でガッツリチェックするのが王道!! (担当した案件が管理された環境化で実行されるアプリだったので Jqueryだけでも問題は発生しなかった)
6.
6 ★ Jqueryの設定 1. プラグインの導入 jquery-ui.min.js Jquery.validate.js 2.
チェックロジックの作成 ファイル「val.js」を作成し、 フォルダ「asset/javascript直下」に配置 「val.js」では ①入力規則 ②注意文 ③注意文の表示場所 これらを指定している
7.
7 ★ val.jsの中身 1.入力規則 入力必須 要数値入力 最低一つチェック #interest10がチェックされていたら 入力必須
8.
8 ★ val.jsの中身 2.注意文 3.注意文の表示場所
9.
9 ★ Turbolinksを止める Rails4からデフォルトになったturbolinksではJquery.readや window.onloadイベントが発生しない!! => よって止めることに。 ・手順 ①gemfileから
「gem ‘turbolinks’」を削除 ②app/assets/javascripts/application.html.erbから 「 //= requre turbolinks 」を削除 これでうまくいくはず!!
10.
10 おしまい
Download now