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

セレクトボックスの選択内容の取得

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
セレクトボックスが選択されているかどうかをチェックする方法について解説致します。
講師:
04:32

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり selectbox の選択内容を 調べる方法について解説いたします まずはダウンロードしてきたこちらの 「 required_selectbox 」 というフォルダの中に入っている これら3つのファイルを エディターで開いてください そして これがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回はフォームの中で必須入力項目として 設定されている selectbox の値を取得して 実際に選択されているかどうかを 判別するためのプログラムを 書いていきたいと思います 今回はその中でも selectbox へ 選択された値の内容を 取得するところまでを見ていきます まず 今回取得する selectbox は こちらの HTML ソース上の この部分ですね 「 dl id="address" 」の タグの中にある こちらの selectbox です 「 select name="address" 」 の属性がついていますね こちらの selectbox で選択された 内容の値を 取得してみたいと思います それでは JavaScript.js を 開きます 今 JavaScript.js は このようになっていますね 今回は前回「テキストボックス」と 「テキストエリア」の値を取得した その下に書いていきたいと思います 基本的には「テキストボックス」と 「テキストエリア」の値の取得の方法と 同じ形で書きます それでは早速書いてみたいと思います まずは 変数を定義します 「 var 」そして変数の名前を書きます ここでは「 address 」と しておきましょう そして「=」 そして「 $() 」 そしてここには selectbox を 指し示すセレクタを書きます ここに「 select 」 そして「()」の こちらに「 name="" 」で囲って この中に先ほどの name 属性の 値を書きます 今回は「 address 」でしたね そしてこの後に同じように「 .val 」と 書いて「()」の「;」 このように書くことでこの selectbox の要素で選択された値が こちらの変数「 address 」の 中に入っていきます 「テキストボックス」や「テキストエリア」 では文頭や文末に入っている 目に見えないスペースを 削除するために このように「 .trim 」と書きましたが selectbox の場合は あらかじめ 選択される値が決められているため つけてもつけなくても どちらでも大丈夫です 必要に応じて使うようにしてください 今回はサンプルのプログラムとなりますため 一応書いておきましょうか 同じように「 $.trim( 」 そしてこの中の文をこの 「 trim 」の 括弧で囲ってあげます こうすることによって もしこの selectbox の選択された 内容の文頭や文末に無駄な空白があった場合や もともとスペースしか入っていないような 選択肢を選んだ場合は それらが削除されて空っぽの状態で こちらの「 address 」の変数の中に 格納されていきます この値の格納された「 address 」を使って 実際に選択されているかされていないかを 判別していきます その判別方法に関しては 後のレッスンで 入力エラーがあった場合の処理と 合わせてご説明します 以上で レッスンは終了です 今回はフォームバリデーションを 実装するにあたり selectbox で 選択された内容を 取得する方法について解説いたしました 以降のレッスンでは チェックボックスやラジオボタンの 選択状態を取得する方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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