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

Submitボタンへのクリックイベント登録

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
バリデーションを発動させる為に、Submitボタンにクリックイベントを登録する方法について解説致します。
講師:
05:55

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり バリデーション機能を発動させるために submit ボタンにクリックイベントを 登録する方法について解説いたします まずはダウンロードしてきた こちらの submit_event というフォルダの中に入っている これら3つのファイルを エディタで開いて下さい そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回クリックイベントを登録するボタンですが HTML ソース上で見ると この部分になります ソース上の下のほうにある こちら id="submit" が付いた p タグの中にある こちらのボタンタグですね こちらにクリックイベントを 付けてみたいと思います それでは javascript.js を エディタで開いて下さい javascript.js は 今 このような状態になっています この部分は前回のレッスンでご紹介した フォームの各列の dl 要素を jQuery オブジェクトとして 変数に格納している状態です 今回のクリックイベントの登録は この下に書いていきます それでは早速書いていってみたいと思います まずクリックイベントを 登録したい要素を書きます このように書いていきます $() そしてこの () の中に 先程の id="submit" が付いた― p タグ の直下にあるボタンという セレクタを書きます p そして #submit そしてこのように書いて button と書きます そしてこの後に . そして on と書いて () そして最後の ) の後ろに ; を書きます そして この on の中の最初の引数に イベントの種類を書きます 今回はクリックをしたら バリデーションの機能を発動させる という形になりますので ここでは このように click と書きます そして ,(カンマ) その後に function と書いて () の {} と書きます このように書くことで id="submit" の p タグですね こちらの直下にある ボタン要素をクリックしたら function の {} の間に書かれた 処理を発動させる という意味になります それでは この {} の間に 数行 改行を入れます そして このように書きます まずは $(this) と書いて .blur(); そして この function の {} の 最後の行に このように return false; を書きます このように書くことで この button をクリックした時に まず こちらの $(this).blur で 渡ってきたフォーカスをはずして そして この return false の所で この button タグの デフォルトの動作をキャンセル 要は破棄させることができるわけです それでは この blur と return false の間に 試しにこのように書いてみましょう alert(); そして ここの alert の引数にこのように書きます 「動作テストです。」 と書きます そして この状態で javascript.js の ファイルを保存してみましょう ファイルの保存のキーボードショートカットは Mac でしたら command+S そして Windows でしたら Ctrl+S の 同時押しでしたね それではファイルを保存します そして この index.html を ブラウザで開いてみましょう こちらのファイルをブラウザで開きます すると このように表示されてきました それでは早速 先程 登録したイベントが きちっと動いているかどうか 確認してみたいと思います 先程クリックイベントを登録したのは こちらの「送信する」ボタンでしたね ではクリックしてみたいと思います すると このように 「動作テストです。」 というふうに でてきましたね このように表示されてくれば 正常にクリックイベントの登録が完了している という形になります それでは「OK」ボタンを押して エディタに戻ります 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり submit ボタンにクリックイベントを 登録する方法について解説いたしました 以降のレッスンでは submit ボタンをクリックして バリデーション機能を発動させた際に 入力エラーの有無の結果で その後の処理を分岐させる方法について 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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