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

チェックボックス / ラジオボタンの選択状態の取得

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
チェックボックス、及び、ラジオボタンが選択されているかどうかをチェックする方法について解説致します。
講師:
06:12

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを 実装するにあたり チェックボックスやラジオボタンの 選択状態を調べる方法について解説いたします まずはダウンロードしてきた こちらの― reruired_radiobutton というフォルダの中に入っている これら3つのファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを 始めていきましょう 今回はフォームの中の必須入力として 設定されている― チェックボックスとラジオボタンの部分の 選択状態を取得して ちゃんと入力されているかどうかを 確認するための手順を解説していきます 今回のレッスンでは その選択状態を調べる所までを 実際にプログラムとして 書いてみたいと思います 今回 この HTML のソース上で 必須入力とされている― チェックボックスとラジオボタンは どこにあるかというと まずこちらの「性別」の部分ですね こちらに必須入力のラジオボタンがあります そしてもう1つ チェックボックスはというと ここですね こちらのアンケートの部分 こちらが必須入力とされている チェックボックスとなります それでは この部分に プログラムを書いていってみたいと思います それでは javascript.js を開きます 今 このファイルはこのような状態です 前回までのレッスンで 「テキストボックス」と「テキストエリア」と 「セレクトボックス」 この部分の入力内容を取得する所まで やりましたので 今回は この下に チェックボックスとラジオボタンの 選択状態を調べる プログラムを書いていきます まずはチェックボックスのほうから 書いていきます まず これまでと同様に変数の定義をします var そして 今回の変数の名前は このようにしておきます question_checked_nam としておきます そして = $() そしてこの () の中に チェックボックスを指し示す セレクタを記述します 今回は先ほどのアンケートの部分でしたね それを この中に書いてあげます ですので ここには input と書いて [name=""] そしてこの中に question と書いてあげます そして この ] の後に このように書きます checked と書きます そして この最後の )の後ろに . そして length と書いて ; を打ちます このように書くことで この name="question" という 属性のついた input で 数 check されたものの数を 取得することができます その数を この question_checked_nam という変数の中に格納している状態ですね 要するに これが0であれば このチェックボックスは 何もチェックされていないという状態になり これが1以上であれば その数だけ― チェックボックスがチェックされている という形になります それでは次に ラジオボタンのほうを 書いていってみたいと思います 同じように まずは 変数の定義です var そして変数の名前を書きます ここではこのように書いておきます gender_checked_nam と書きます そして = $() この中に先程の「性別」を選択する チェックボックスを指し示す セレクタを書きます ですので この中には 同じように input と書いて [ ] の name="" そして性別を選択する所の input の name 属性は gender となっていましたね このように書きます そして こちらの所に 先程と同じように checked と書いて 最後の ) の後ろに . そして length と書いて ; と書きます 先程のチェックボックスと同様に ラジオボタンのほうでも 同じ書式を使います このように書くことで name="gender" の属性が付いた― input で かつ チェックされたものの数を こちらの gender_checked_nam の中に 格納する という形になります もちろん何も選択されていないければ 0 となって 1以上選択されていれば その数がこちらに格納されてくるわけですが チェックボックスと違って ラジオボタンは 常に1つしか選択できません ですので ここには 0か1か という形になります 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり チェックボックスとラジオボタンの 選択状態を取得する方法について 解説いたしました 以降のレッスンでは これまでのレッスンで作成した― input ボックス・テキストエリア セレクトボックス・チェックボックス ラジオボタン の 入力状態を判別して 入力エラーがあった場合の 処理の方法について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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