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

入力状態よる処理分岐と入力エラー処理

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり 取得したインプットボックスなどの 各フォーム部品の入力状態 及び選択状態をもとに処理を分岐させる方法 そして入力エラーがあった場合の 処理の方法について解説します まず ダウンロードしてきたこちらの required_branch というフォルダの中にある― これら3つのファイルを エディタで開いて下さい これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう 今回は前回までのレッスンで取得した 各フォームの必須項目の入力された内容 それが格納された変数を使って 処理を分岐させて もし入力エラーがあった場合 その入力エラーに対しての処理を 書いていってみたいと思います では まず こちらの javascript.js を開きます 今 このファイルは このような状態になっていますね では ここに入力された内容が 格納された変数を使って 条件分岐をさせてみます まずこちらの input name="namae" こちらの要素に入力された内容が この onamae という変数に入っていますが こちらの onamae という変数を使って 条件分岐をさせてみます 条件分岐をさせるには if 文を使います まず if と書いて ( ) と書きます そして { } そして この { } の間には 数行の改行を入れておきましょう この if の後の ( ) ですが ここには こちらの上の変数 onamae を コピーして こちらの中に貼り付けておきます この変数 onamae の頭に ! をつけておきます こうすることによって 「この変数 onamae の中に 何も入力されていなければ こちらの { } の間を実行する」 という意味になります では この何も入力されていない状態 要するに入力エラーの状態です この部分の処理を書いていってみましょう まずは前回までのレッスンで作成した― こちらのエラー数をカウントする為の変数― error_count に1を足してあげます それは このように書きます 変数 error_count そして ++ と書いて ; と書きます このように書くことで この変数 error_count に プラス1をすることができます そして この後にエラーのテキストを 出力する為のプログラムを書きます まず こちらも 前回までのレッスンで作成した― こちらの変数 各フォームの列ですね onamae とか furigana とか そういう列を格納している― この onamae_box この変数を使って記述していきます まず この変数をこちらに貼り付けます よく見ると綴りが間違っていましたので ここで修正しておきます ここは onamae ですね onamae_box としておきます こちらも修正しておきましょう onamae_box と書いて この後に . を書きます そして find と書いて ( ) そして この find の中には このように書きます p そしてクラスを意味する . (ドット) そして ここに error と書きます そして この後に更に . を書いて text と書きます そして この後にも ( ) を書きます そして この中に このように書いておきます 「入力必須項目です」と書いておきます そして更に最後の ) の後ろに . を書いて show と書いて ( ) の ; と書きます このように書くことで もし こちらの input [name="namae" ] の要素に 何も入力されていなかったときに こちらのエラー文を出すプログラムを 実行させることができます これは どのような意味かというと まず こちらの変数 onamae_box は こちらの dl#onamae という要素です こちらの中に入っている find は 見つけるという意味です 「onamae_box の中に入っている p クラス error 要素を見つけろ」 という意味になります そして 「その要素を見つけたら その中のテキストを『入力必須項目です』― といった内容に変更しろ」 という意味になります そして それが変更できたら show 「それを表示しろ」 という意味合いになります こうすることによって エラーの文言の出力が可能になります 他にもテキストエリアや セレクトボックスなどがありますが 書き方はどれも同じです ですので こちらの部分をコピーして 下に貼り付けます そして この if 文のところを この変数 inquiry に onamae から差し替えます そして error_count を1足すのは 同じ処理で大丈夫です そして こちらの onamae_box ですが ここでは textarea なので inquiry の部分ですね なので こちらの部分をコピーして ここに貼り付けます こうすることによってテキストエリアの 必須項目のチェックが完了します 更に こちらのセレクトボックスも同じですね 同じようにコピーして貼り付けます そして if 文の中の inquiry を こちらの変数 address に変えて そしてこちらの inquiry_box の所を このセレクトボックスの部分 要するに address の部分ですね ですので こちらの address_box の所を コピーして こちらに貼り付けます これでセレクトボックスの入力必須の チェックも完了しました 次にチェックボックスとラジオボタンの 入力必須のチェックをしてみましょう ここでも殆ど同じです 1点だけ異なる点があるので その点に注目しながら見ておきましょう まずは同様に if 文を書きます そして この { } の間に数行空けます そして この if の中にこちらの変数 question_checked_num をコピーして この中に貼り付けます 但し 今回の場合この頭に ! を つけるのではなくて このように書きます < 1 と書きます 中は上で書いたものと同じで大丈夫です これを貼り付けます そして こちらの address_box と書いてある所を こちらの question の所に変更します ですので こちらの question_box です これをコピーして ここに貼り付けます これで このチェックボックスの 入力必須チェックは完了です 何故この部分が先程と違って このような形になっているかというと この question_checked_num には この部分で書いた結果が格納されていますが こちらで取得した結果は チェックされているチェックボックスの数でしたね ですので その数が1より小さいのであれば ―要するに0ですね― 0の場合は入力されていないということになって 入力必須エラーとなる訳です そして最後にラジオボタンも同様です こちらのチェックボックスをコピーして 下に貼り付けます そして こちらの if の中の変数を こちらの変数に変えてあげます そして こちらの question_box と なっている所を 次は gender_box ですね こちらです これをコピーして ここに貼り付けます このようにすることで このラジオボタンの 入力チェックも完了となります では最後に この状態で この javascript.js を保存して ブラウザで確認してみましょう ファイルの保存のキーボードショートカットは Mac では Command+S Windows では Ctrl+S の同時押しでしたね ではファイルを保存して ブラウザで開いてみましょう こちらの index.html をブラウザで開きます すると このように表示されてきましたね では 何も入力をしない状態で こちらの送信するボタンを押してみましょう すると このように 「入力エラーがあります」と出てきて この必須項目の所に このようにエラーが表示されていますね このように ちゃんと入力チェックの機能が 働いていることが分かります では エディタに戻ります 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり 取得した各フォーム部品の入力状態や 選択状態をもとに処理分岐をさせて 入力エラー時の処理を 実装する方法について解説しました 以降のレッスンでは フォームの中で 入力されたメールアドレスの書式が あっているかどうかを正規表現という 方法を使って判別する方法について 解説しますので そちらも合わせてご覧下さい

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

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

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

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

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

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