4月16日にアップルストア心斎橋で開催予定のCSS Nite in OSAKA, Vol.14に出演される徳田和規さんが作った『jQuery.validation.js』を一足お先にご紹介します。詳細はセッションでご説明してくださいます。
快適なform入力チェックを楽に実装！ jQuery.validation.js
イライラさせて顧客獲得を逃したフォーム、それを改善すべく人気のライブラリ、「jQuery.validation.js」。
とにかく、JavaScriptが分からない方も必見！
皆さんの大切な「フォーム」を快適にするために、実装方法を憶えておきましょう！
□■□■クール＆シンプルなサンプル□■□■
http://moto-mono.net/sample/validation/
フォーム画面遷移なく、クールな入力チェックをとても簡単な実装で行える徳田さんのオリジナルのJavaScriptライブラリです。
セッションでは、実際どれだけ簡単か、実装するための方法と効果を見せていただきます。
正直、JavaScriptが分からない方でも、XHTMLが理解できている方なら、とても簡単でカッコいい「フォームの入力チェック」が作成可能になります。
例えばお問い合わせフォームにこんな設定をしたい場合↓↓↓
・必須項目指定
・メールアドレスチェック
・全角禁止
・電話番号
・数値のみかどうか？
・郵便番号
他
【例】メールアドレスチェックの場合
<input type="text" name="mail" id="mail" value="" class="email hankaku required" />
JavaScriptファイルを読み込み、設定を終わらせた後input要素のクラス名の値を上記のように設定するだけで、必須項目・メールアドレスチェック・全角禁止が可能になります。※
■メールアドレス再入力チェックの場合
■入力文字数をチェックする場合
なども楽に実装可能になります。
※アクティベートが必要ですが、その簡単な方法も教えて下さいます。
# $(function(){
# $("フォーム要素のID属性").validation();
# });
とにかく、実装方法もお伝えいただくので、「コードが苦手」な方にはぜひみていただきたいセッションです。
実際どれだけ簡単か、実装方法と効果をその目でお確かめください。
