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

入力エラーの有無による処理分岐

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Submitボタンをクリックしてバリデーションを発動させた際に、入力エラーがあるかないかによって、その後の処理を分岐させる方法について解説致します。
講師:
05:51

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり バリデーション機能を発動させた際に 入力エラーの有無の結果によって その後の処理を分岐させる 方法について解説します まずダウンロードしてきたこの result_branch というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まずは javascript.js を開きましょう 今このファイルはこのような状態になっています 前回は Submit ボタンに click イベントを 登録するところまでやりました 今回はこの中に入力エラーの数を カウントする変数を作って その変数の中の値が1以上かどうか 要するにエラーがあるのかないのかを 判別してその後の処理の 分岐を行う方法について 実際に書いて行ってみたいと思います ではまず こちらの alert の部分を削除します まずは エラーの数をカウントする 変数を作ります それはこのように書きます まず変数の定義ですね var と書いて 変数の名前をここでは error_count としておきます そして = 0; と書いて この変数の初期の値を 0 としておきます 次にこの error_count の値が 1以上かどうかという― それはこのように書いて行きます 分岐を作りたいと思います まず条件分岐の if と書いて ( )  そして { } そしてこの { } の間には 数行の改行を入れておきましょう 更に 最後の } の後に else と書いて そして { } を書きます そしてここの { } の間にも 数行空けておきましょう こちらの if の後の ( ) の中に このように書きます error_count そして >= 1 と書きます こうすることによって もしこの変数 error_count の値が 1以上だった場合は 要するにエラーがあった場合は こちらの { } の間の処理が実行されます そしてそれ以外 要するに エラーカウントが 0 の時は こちらの else の後の { } の間の 処理が実行されるようになります 要するにこの部分がエラーがあった時の処理 そして else の後のこの部分の処理が エラーがなかった場合の処理となります ではこの中に処理を書いて行きます ここではまずエラーがあった時の処理 alert と書いて ( ); そしてこの alert の引数に 「入力エラーがあります。」と書いておきます そしてこの後に return false; と打って 処理を中断させましょう 次にエラーがなかった場合の処理です この部分に同じように alert と書いて ( ) ; そしてこの中に 「入力エラーはありません。」と書きます そしてここに書いてある 最後の return false; を 切り取ってこの下に貼り付けておきましょう 実際にフォームを作るときには 入力エラーがなかった場合 こちらの処理を入れ込む必要はありません 今回は実際にデータを送信しない サンプルのプログラムとなっていますので あえてこのような書き方をしていますが 実際の制作においては必要のないものと 覚えておいて下さい またこちらの変数 error_count ですが 現状はまだ入力エラーを検証する為の プログラムを書いていないので こちらはずっと 0 のままと なってしまいますが 以降のレッスンではこちらの下に 入力エラーを検証するプログラムを書いて エラーがあった場合には この error_count の数を加算していく― といったプログラムを書いていくので 実際にこのプログラムがきちんと 動作するのは その検証のプログラムを 書いてからになります 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり 入力エラーの有無の結果に対して その後の処理を分岐させる― 方法について解説しました 以降のレッスンでは具体的にフォームに 入力された内容を取得して きちんと入力されているかどうかを 確認する方法について解説しますので そちらも合わせてご覧下さい

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

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

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

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

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

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