JavaScriptでフォームのバリデーションチェックを実装する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでフォームのバリデーションチェックを実装する方法について現役エンジニアが解説しています。バリデーション（validation）とは、検証とか妥当性という意味で入力値の確認のことです。フォームでは送信ボタンが押されたタイミングで、各入力値をバリデーションします。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptでフォームのバリデーションチェックを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでフォームのバリデーションチェックを実装する方法について詳しく説明していくね！
お願いします！
バリデーションチェックとは
バリデーション（validation）とは、検証とか妥当性という意味になります。バリデーションチェックは、そのまま妥当性の確認となります。
平たく言えば、入力チェックくらいの認識でよいと思います。
JavaScriptでバリデーションチェックを行うメリット
大きいメリットとしては、ユーザーを待たせずに間違いを教えることができることです。また、通信を発生させないことで通信量の節約やサーバーの負荷の軽減にもなります。
一例として会員登録で名前などの情報を入力するケースで説明します。
情報の入力が完了した後は、そのサイトに入力情報が送られるという流れになります。ここでサイト（サーバー）に送られてから入力に間違いがある場合、ユーザーは画面が切り替わるのを待たなくてはなりません。
サーバー側でのチェックはセキュリティの観点からも必ず行うのですが、まずはJavaScriptで入力が終わったタイミングに合わせてバリデーションチェックをすることで、通信が発生せずユーザーの待ち時間とサーバーの負荷の双方が軽減するというわけです。
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
JavaScriptでフォームのバリデーションチェックを実装する方法
入力してほしい内容になるようなチェック処理を、特定のイベントで呼び出されるようにします。
入力してほしいチェック内容は、「○文字以上の入力」や「電話番号にハイフンを入れない」など希望するデータに沿ったものを実装してください。
特定のイベントは、ボタンが押された際や入力項目からフォーカスが外れた際などユーザの入力が終わったと思うタイミングに近いイベントを選択してJavaScriptで設定してください。
実際に書いてみよう（サンプルコード）
まずはHTMLソースです。シンプルな例にするために文字の入力欄を1つと、チェックを実施するボタンを用意しています。チェックボタンを押したタイミングでJavaScriptのcheckNameという関数が呼び出されます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <input type="text" id="name"> <button onclick="checkName()">チェック</button> </body> </html>
続いてJavaScriptのソースです。
今回は入力文字数が8文字以上であるかをチェックしています。
8文字未満の場合はコンソールにエラーメッセージを表示しています。
function checkName(){
const name = document.getElementById('name').value;
if(name.length < 8){
console.log('8文字以上入力してください');
}
}
まとめ
実際に実装する際はもっとたくさんのチェックをすることになると思います。また、エラーもコンソールではなく画面に表示することになるでしょう。
まずは最小限の入力チェックを実装し、そこから処理を追加していくことで複雑な処理にも対応できますのでたくさん実装してみてください。
筆者プロフィール
| 横山茂雄（よこやましげお）
フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
