JavaScript と jQueryで作るフォームバリデーション

正規表現チェック結果に応じた処理分岐と入力エラー処理

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
入力必須項目への内容が入力されていなかった場合の処理分岐について解説致します。
講師:
08:41

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり これまでのレッスンでご紹介した― 正規表現での入力チェック結果に 応じた処理の分岐と 入力エラー時の処理の方法について 解説いたします まずは ダウンロードしてきた こちらのフォルダの中に入っている― こちらの index.html と javascript.js そして stylesheet.css を エディッターで開いてください そして これがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではこちらの javascript.js を エディッターで開きます そして下の方を見ていきますと この部分に これまでのレッスンで 実装してきた正規表現を使った― 入力データの書式チェックの プログラムが書かれていますね 今回はこの部分に入力チェックの 結果に応じた条件分岐と― それに伴って入力エラー時の処理の 書き方について 実際に書いていってみたいと思います それでは今回は こちらのメールアドレスの書式チェック こちらの入力チェックの結果に応じた 処理分岐と エラー時の処理の実装の方法について 書いていってみたいと思います まずはこちらの下に改行を少し開けて この部分に書いていきます まずは条件分岐を使って 入力チェックの結果に応じて処理を分けます まずは このように書いていきます if ( ) そして { } そして この { } の間に 数行改行を入れておきます そして この if の ( ) の中に このように書きます email そして & & と書いて ! の is_email と書きます このように書くことで まずはこちらの変数 email この部分には name="email" という属性のついた― input 要素に入力された値が 格納されていましたね ここの if の中にこのように書くことで 「この email の中に値がある場合」 要するに「入力されていた場合」 という意味になります そして この && は 「かつ」という意味ですね email の値が入力されていて かつ 今度は ! に is_email という変数 これは is_email の値 要するに 「正規表現でこの入力された email の書式をチェックして その email アドレスの書式に 一致していなかった場合」― という意味になります まとめますと 「email の値が入力されていて かつ その email の値が mail の書式に従っていなかった場合」 という意味になります 要するに 入力エラーの時ですね そして この if の { } の間の部分に その入力エラー時の処理を書きます まずは変数 error_count error_count ですね そして ここに + + と書いて ; と書きます こうすることによって 先に定義した エラーカウントに1を加算することができます そして この下にこのように書きます email_box.find そして ( ) の この中にエラー文を出力するための p クラス error を指し示す セレクタを書きます p.error ですね そして この後に text と書いて ( ) そして この中にエラー文を書きます 「メールアドレスの書式が― 正しくありません」と書きます そして 最後の括弧の後に .show (); と書きます この変数 email_box は 前のレッスンで定義した― 各フォームの列の部分ですね こちらの #email という属性を持った dl 要素を指し示します その要素の中にあるエラー文言を 格納するための p タグ クラス error を持っている p タグですね それを探し出して さらに その p タグの中のテキストを 「メールアドレスの書式が正しくありません」 という文言に変えます その後に show とすることで それを表示するという意味合いになります それでは この状態で一度 javascript.js を保存しましょう そして index.html をブラウザで開いて 今回のメールアドレスの書式チェックの 動作を確認してみたいと思います こちらの index.html をブラウザで開きます そうすると このような画面が 表示されてきましたね では こちらの「メールアドレス」の部分に メールアドレスの書式ではない― 適当な文字を打ってみましょう 今回は abcde といった形にしておきます そして こちらの「送信する」ボタンを 押してみると… このように「入力エラーがあります」 と出てきて こちらのメールアドレスの部分には 「メールアドレスの書式が正しくありません」 という形で出てきましたね このように表示されてくれば きちんと正規表現のチェックができている といっかたちになります それではエディッターに戻ります ここまで出来ましたら 最後に初期化のプログラムを 書いておきましょう 初期化のプログラムを書くのは こちらの― エラー数カウント用変数が定義された こちらの上の部分となります この部分に このように書いておきます $( ) そして この中に form と書いて id を表す # そして mailform と書きます そして スペースを空けて p そして .error と書いて こちらの } の後ろに hide() の ; としておきます こうすることによって 一度 submit ボタンをクリックして 表示されてしまったエラーでも もう一度 submit ボタンを クリックすることによって 一度エラーメッセージをすべて消去して 新たに入力された内容をチェックして エラーがある項目だけを 表示させることが可能です そして これまでのレッスンの中で メールアドレスの書式のチェック以外にも 正規表現を使って電話番号の書式のチェックや ひらがなのチェックなどもやってきましたね 残りの正規表現でのチェック部分についても この同様の形で 実装することができますので ぜひご自身でトライしてみてください また すべての実装が完了したファイルも ダウンロードしてきたファイルの中の こちらの「完成版」というフォルダの中に 入れておりますので 合わせて参考にしてみてください 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり 正規表現での入力チェック結果に応じた 処理の分岐と 入力エラー時の処理について解説いたしました 以上のレッスンをもちまして JavaScript と jQuery を用いた― フォームバリデーションの 実装は完了となります このコースで基本をマスターすれば 少々難しい入力チェックも応用して 実装することが可能になります これまでのレッスンを参考にしながら ぜひ ご自身で作るサイトにも このバリデーション機能をつけてみてください

JavaScript と jQueryで作るフォームバリデーション

このコースではJavaScriptとjQueryを使ってユーザー登録フォームなどでユーザーが入力忘れや誤記入した場合にユーザーに通知するフォームバリデーション機能を実装する方法を学習します。JavaScriptとjQueryの説明からHTMLやCSSコーディングの仕方、入力必須項目のチェック方法についても紹介します。

1時間45分 (18 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年11月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。