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

フォームバリデーションの紹介と学習のポイント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームバリデーションの実装が完了した完成版のファイルを確認しながら、バリデーションとはどういったものなのか、そして、それを製作していくにあたっての学習のポイントを確認していきます。
講師:
03:54

字幕

このレッスンでは これから JavaScript と jQuery を使って フォームバリデーションを 実装していくにあたり 実際に このコースで制作していく フォームバリデーションの完成版を見ながら フォームバリデーションとは どのようなものかといった確認と 今後のレッスンで学んでいく 学習のポイントを確認しておきます フォームバリデーションとは 普段私たちがインターネット上で ウェブサイトを利用する際にも よく見かけるもので サイトで会員登録をしたり 運営者に問い合わせを送ったり ネットショッピングをしたりする際に よく目にします 言葉で説明するより 実際に目で見ていただいた方が 分かりやすいかもしれませんので ここでは そのフォームバリデーションを これから私たちがこのコースで制作していく 完成版で確認してみたいと思います 今 こちらの画面に映っているのが その完成版となります このように フォームの入力欄が 複数並んでいて 通常 ここに必要事項を入力して 送信ボタンを押すと こちらの送信ボタンですね このボタンを押すと サイトの運営者にメールが飛んだり 会員登録ができるわけですが 例えば ここに書いてあるような 「必須」と書かれている所に 必要事項を入力しなかったり 間違った内容 例えばこちらのメールアドレスの部分に メールアドレスではない何か別のものを 入力したりすると 画面上に その旨のエラーメッセージが 表示されてきます 例えば 今こちらの送信ボタンを押すと このように「入力エラーがあります」と出て 入力必須のところに入力していないと このように「入力必須項目です」といった― エラーメッセージが表示されてきます これがフォームバリデーションという機能です さて これからこのフォームバリデーションを 実際に自分たちで学習しながら 制作していくわけですが ここでは いくつかの学習のポイントについて 確認しておきたいと思います 1つ目は こちらのフォーム部分の構成です バリデーション機能を実装するに当たって どのようにフォーム部分を HTML と CSS で構築するかについて見ていきます 2つ目は 先程もやったように こちらの送信するボタン― 要するに SUBMIT ボタンですね こちらをクリックしたときに そのバリデーション機能を 発動する方法について見ていきます 3つ目は フォームの中で設定されている このような入力必須項目に きちんと入力されているか どうかをチェックして 入力していなければ その旨のエラー文を 表示する方法について確認していきます 最後に 正規表現という手法を使って 例えば こちらの「メールアドレス」や こちらの「電話番号」の書式 そして 例えば こちらの「ふりがな」の部分ですね ここでは ひらがなの「ふりがな」 ここでは カタカナの「フリガナ」といった形で その文字種について きちんと指定した内容で ユーザーが入力しているか どうかをチェックする方法 そして入力されていなければ その旨のエラー文を表示する方法について 確認していきます 以上の点が このコースの 主な学習のポイントとなりますので しっかりと頭に留めておきましょう これらの点について HTML CSS JavaScript の 3つの観点から解説していきます 以上で レッスンは終了です 今回は これから制作していく フォームバリデーションの確認と 以降のレッスンにおける 学習のポイントについて確認しました

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

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

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

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

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

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