AngularJSでフォーム入力を検証しよう

検証に複数の条件を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
input要素の入力に複数の条件を定めて、テキストの表示・非表示を切り替えます。
講師:
06:32

字幕

このレッスンでは input 要素への入力に 複数の条件を定めて 注意書きの表示・非表示を入れ替えてみます 今現在「以下の項目を 入力してください」の下に 「名を入力してください」とあります そして名を入れる input 要素 ここには ng-required のディレクティブに true となっています ここに入力しなければいけないということです この「名を入力してください」という テキストなんですが ng-show で表示・非表示を 切り替えるようになっています そして myform これはこのフォームの名前ですけれど その中の firstname そしてこれが angularJS の 設定なんですけれども $invalid 入力が正しく行われていない― 場合に表示されるということですね ですからこの名のフィールド input 要素に入力をきちんとすれば 表示が消えるということになります 確認してみましょう 「ファイル」から 「ブラウザでプレビュー」です 「名を入力してください」が表示されています では名を入れたいと思います 姓名の名を入力します そうすると表示が消えました ということで正しく機能されている 訳ですけども 姓の方も当然入れなければなりませんね こちらも設定しましょう 画面はコード操作がしやすいように コードビューに広げます そして姓名の姓の方ですね こちらも設定するんですが であれば一番上に注意書きがあるのは おかしいですね これはまず名の方に持ってきます そして同じようにコピーを持ってきて しまいましょう 姓の方の下 input 要素の下にも もっていきます そうするとチェックする名前が違いますので チェックする名前は姓なので lastname ですね コピーして lastname ペーストです そして名でなく姓を入力すると いうことですので 「姓を入力してください」という風にします それから input 要素 lastname の方にも ng-required のディレクティブを 入れておきます これもコピーしてしまいましょう firstname からコピーして input 要素 lastname の 後にもってきます これで一旦保存しましょう そして「ブラウザでプレビュー」します 両方とも入力してくださいと出てきますね そしてここで名前を入れます 名の方の注意書きが消えました 姓の方を入れましょう 消えました これはこれで機能としては 合っているんですけども 注意書きというのはあんまり沢山出ていると 注意になりませんね 注意が散漫してしまいます ですから入力をしようとして スキップ 飛ばした時に この注意が出てくるとより分かりやすいですね 入力をしようとしてと言うのは 一回このフィールドの中をクリックしたらと このクリックしたという操作も 飛べますので それも合わせて条件として設定した上で クリックした上で飛ばしたら このメッセージ 注意書きが表示されると いう風に変えたいと思います まず firstname の方で試しましょう ng-show のディレクティブ この中でフォームの中の myform ですね firstname が入力されていなかったらと いう条件なんですが ここに条件を加えます これは JavaScript と同じで & 2つになります &&ですね そしてやはり myform の firstname が に対して 入力の操作 touch という操作なんですが それを行おうとしたらという条件を加えます この $ まで一緒なので コピーをもってきます もし touch されたらということで この条件については touched という 風にします ではまず こちらを試してしまいましょう ファイルを保存して 「ブラウザでプレビュー」します 名の方 表示されていませんね クリックしてやめたと 飛ばすと表示されると いう形になっています ですからクリックしたからには ちゃんと入れなさいということで 入力をすれば消えてくれます では姓の方も同じように設定しましょう input 要素の lastname の方ですね 設定は殆ど同じですので firstname の方をコピーしてしまうことに しましょう これをコピーして 条件のあとにもって行きます 但し名前は違いますので lastname をコピーして 上書きペーストしましょう これで改めて試したいと思います ファイルを保存して 「ブラウザでプレビュー」です 今度は両方出てきません 姓の方をクリックして 名に移ると 入力してくださいと言われますね もう確認できましたので さっさと入力してしまいましょう そして姓の方 入力すればちゃんと注意書きが消えました このレッスンでは input 要素の入力に 複数の条件を定めてテキストの 表示と非表示を切り替えました その時に複数条件というのは 2つの&マーク つまり&&で指定し 使うプロパティは invalid が入力されていないという プロパティなんですけども 一旦 input 要素をタッチした クリックしたというのは $の touched ということで これを使って条件の設定を行いました

AngularJSでフォーム入力を検証しよう

AngularJSはHTMLを拡張するフレームワークです。Webページを動的に操作することができます。このコースではCSSとJavaScriptの基礎を学んだ方向けに、AngularJSを使った入力フォームの処理の仕方について解説します。インストール方法や動作確認、テキストの表示やデータ形式のチェック、入力に応じたスタイルの変更などをひと通り説明します。

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

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

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

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