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

インプットボックス / テキストエリアの入力内容の取得

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インプットボックス 及び テキストエリアに、内容が入力がされているかどうかをチェックする方法について解説致します。
講師:
06:29

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり インプットボックス及びテキストエリアの 入力内容を調べる方法について解説します まずダウンロードしてきたこちらの required_textbox というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めて行きます 早速レッスンを始めていきます 今回はフォームの中の必須と書かれている 項目の input type ="text" 要素 そしてもう1つ 下の方にあるこちらの textarea name="inquiry" こちらに入力された内容を取得して 実際に内容が入力されているのかどうかを 調べる為のプログラムを 書いていきたいと思います では javascript.js を開きます 今 javascript.js は このような形になっています 今回は前回のレッスンで 変数 error_count を作った― この下に書いて行きます まず先程の index.html のうち こちらの input type="text" name="namae" という属性を持った input に入力された 内容を取得する方法をやっていきます そして javascript.js に戻ります では こちらに書いて行きます 入力された内容を格納する為の 変数を作ります まずは var そしてスペースの ここでは変数の名前を onamae にしておきましょう そして = この後に $ ( ) の この中に先程の input を指し示す セレクタを書きます 今回はこのように書きます input そして [ ] の この中に name と書いて = と書きます そして更に " " を書いて この中に name 属性の値を書きます 先程の input は namae でしたね そしてこちらの ) の後ろに . そして val と書いて ( ) の ; このように書くことで こちらの name 属性に namae の値の入った input タグ こちらの中に入力された内容が この onamae という変数に入って 行きます 因みにこの val というのは value の略です このように書くことで入力された 内容を取得することができます 但しこのままだと目に見えない全角スペースや 半角スペースを入力された場合 そちらも文字として認識されてしまう為 その目に見えない全角スペースや 半角スペースだけが入力された場合 それを削除するように プログラムを変更しておきましょう その為にはこのように書きます こちらの $ マークの前に 更に $ マークを書いて . と書きます そして trim と書きます そして先程のこの文を ( ) で囲ってあげます このようにすることで もしこちらの input 要素の中に 目に見えない半角スペースや 全角スペースのみを入れられた場合でも この trim と書く事によって そのスペースが削除されて こちらの onamae に入って行きます またこの trim を使うことによって 入力された内容の文頭に入っている 目に見えないスペースや 文末に入っている目に見えないスペースも 取り除いてくれます 次に textarea の方もやってみましょう textarea は先程の index.html の― こちらの部分の name="inquiry" の 属性がついた textarea ですね こちらを書いて行きます 同じようにまずは変数を作ります ここでは変数の名前を inquiry とします そして = そして同じように $( ) の この中に textarea そして [ ] の name = " " そしてこの " " の中に inquiry でしたね inquiry と書きます そして同じように . の val( ) です そして先程と同じように無駄な文頭や 文尾のスペースを 取り除いてあげます $ マーク .trim( そしてこちらの一文を ) で囲ってあげます このようにすることで先程と同じように textarea に入力された内容が こちらの inquiry の中に 格納されていきます このように取得された値 入力された内容をベースにして その入力欄の中に実際に内容が書かれているか 書かれていないかを判別していきます その判別方法に関しては 後のレッスンで入力エラーがあった時の 処理の仕方と合わせてご紹介します 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり インプットボックスとテキストエリアに 入力された内容を 取得する方法について解説しました 以降のレッスンではセレクトボックスの 選択内容を取得する方法について 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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