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

「フォーム各列の要素」の変数への格納

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptでプログラミングを組んでいく前に、以降の作業を効率的に進められるように、フォームの各列を変数に格納しておく方法について解説致します。
講師:
05:23

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり 今後の開発を効率よく進める為に まずはフォームの各項目の列の要素を 変数に格納する方法について解説します まずダウンロードしてきたこちらの define_row というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきます 今回は今後の JavaScript の開発を 効率良く進めて行く為に ある仕込みをやっておきたいと思います その仕込とはフォームの各列の要素 要するにこの dl ですね この dl 要素を変数に格納しておくと いった作業となります そうすることによって今後この dl 要素の 中に入っているこれらの要素に JavaScript からアクセスする時に 非常に便利になります では早速この dl 要素を 変数に格納する為の手順を JavaScript ファイルの方で やっていきたいと思います では こちらの javascript.js を開きます 現状このような形になっているので こちらの alert 文を削除します そしてこの部分にその仕込みを書いていきます まず変数に格納する dl 要素を決定します index.html に戻って dl 要素を確認します 今回はサンプルとしてこちらの dl 要素を 変数に格納してみましょう こちらの dl 要素は id="onamae" といった属性がついています これを踏まえた上で 先程の javascript.js に戻ります そしてこのように書いて行きます まずは変数を定義します var そしてこちらに変数の名前を書きます 今回は onamae_box としておきましょうか そして = と書きます そしてこの後にこのように書いて行きます $ マーク  ( ) そしてこの ( ) の後ろに ; そしてこの ( ) の中に 先程の id onamae の属性がついた dl を セレクタで書きます このように書きます dl そして id を表す # そして onamae と書きます こうすることによって ID onamae がついたdl 要素が jQuery オブジェクトとして扱われ そのまま onamae_box という 変数に格納されていきます もう1つサンプルでやってみましょう index.html を開いて その次の dl 要素を見てみます 次は id="furigana1" といった 属性がついていますね この dl 要素を変数に格納します では javascript.js に戻って この下に書いて行きます 同じく var そして変数の名前を furigana1_box とします そして = 同じように $ マーク ( ) の ; そしてこの中に 'dl# furigana1' と書きます これで ID furigana1 のついた dl 要素は jQuery オブジェクトとして この変数 furigana1_box の中に 格納されていきます このようにしてフォームの各列の dl 要素を 変数に格納しておけば 後々 JavaScript の開発の中で その dl 要素の中に含まれている要素を 取得するときにとても便利になります これをすることによって今後の開発の 効率やスピードを高めて行く事ができますので 1つのテクニックとして覚えておきましょう またこの index.html には 他にも更に dl 要素が存在していますので それを参考にしながら残りの部分も 是非ご自身で変数に格納してみて下さい 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり フォームの各列の dl 要素を jQuery オブジェクトとして 変数に格納する方法について解説しました 以降のレッスンではフォームの SUBMIT ボタンをクリックした時に バリデーションの機能を動作させる 方法について解説して行きますので そちらも合わせてご覧下さい

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

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

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

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

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

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