JavaScriptでフォームのバリデーションチェックを実装する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでフォームのバリデーションチェックを実装する方法について現役エンジニアが解説しています。バリデーション（validation）とは、検証とか妥当性という意味で入力値の確認のことです。フォームでは送信ボタンが押されたタイミングで、各入力値をバリデーションします。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでフォームのバリデーションチェックを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでフォームの入力値チェックを実装する方法について詳しく説明していくね！
お願いします！
入力値チェックとは
会員登録画面などで「住所が未入力です」「すでに登録済みのメールアドレスです」などのエラー文言を見たことがあると思います。
今回は、入力値のチェックをJavaScriptを使い実装する方法を説明します。
フロントサイドで入力値チェックを実装することで、画面の読み込みなどを行わずにエラーを伝える方法を学習します。
また入力値チェックをシステム開発の現場では「バリデーションチェック」といいます。
入力値チェックと同意語ですので覚えておきましょう。
フロントサイド・サーバサイドの入力値チェックについて
一般的なWebアプリは、フロントサイド、サーバサイド、データベースの3つで構成され、メールアドレスなどが登録済みかどうか確認する際は、データベースの登録情報を参照するのでサーバサイドでチェックを行います。
一方、必須項目（氏名、住所など）が入力されているかなど、画面上で判定できるものはフロントサイドでチェックできます。
ただし、JavaScriptはブラウザの設定などで無効化できるため、同様のチェック処理は必ずサーバサイドでもチェックするようにしましょう。
実際に実装してみよう
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div id="message">
</div>
<form>
<hr/>
<label>氏名：</label>
<input type="text" name="name" id="inputName" maxlength="100" value="" placeholder="氏名を入力してください">
<br/>
<label>年齢：</label>
<input type="number" name="age" id="inputAge" value="">
<br/>
<label>メールアドレス：</label>
<input type="text" name="mail" id="inputMail" maxlength="100" value="" placeholder="メールアドレス">
<br/>
<input id="checkKiyaku" type="checkbox" name="checkKiyaku" ><label for="checkKiyaku">利用規約に同意します。</label><br>
<input type="button" id="btnSubmit" value="登録する">
<hr/>
</form>
</body>
</html>
ブラウザで表示すると以下の通りです。
こちらの画面で各入力欄に入力値チェックを実装していきます。
今回は、各項目に未入力チェックとメールアドレスの形式チェックを実装していきます。
メールアドレスのチェックには、正規表現を使います。
メールアドレスは「test12345@xxxxxxx.co.jp」のように「@」を含む特定の文字列のパターンであるかチェックを行います。
[A-Za-z0-9]{1} //アルファベット小文字、大文字または数値が1文字
[A-Za-z0-9_.-]* //アルファベット小文字、大文字または数値、「_.-」が0文字以上
@{1} //「@」が1文字
[A-Za-z0-9_.-]{1,}//アルファベット小文字、大文字または数値、「_.-」が1文字以上
. //「.」が1文字
[A-Za-z0-9]{1,} //アルファベット小文字、大文字または数値が1文字以上細かな条件は割愛しますが、こちらの条件を組み合わせることで「先頭に記号を含まない、@と.を含む」文字列を判定できます。
上記を合わせた正規表現は以下の通りです。
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/
正規表現の詳しい使い方はこちらの記事に説明がありますので、あわせて確認しましょう。
また、メールアドレスにはRFCという規格があるのですが、サーバサイドのフレームワークやバージョンにより「@」前に「.」が含まれているとエラーが発生する場合があります。
必ずサーバサイドでもメールアドレスの型チェックは行うようにしましょう。
JavaScript
<script>
window.onload = function(){
/*各画面オブジェクト*/
const btnSubmit = document.getElementById('btnSubmit');
const inputName = document.getElementById('inputName');
const inputAge = document.getElementById('inputAge');
const inputMail = document.getElementById('inputMail');
const checkKiyaku = document.getElementById('checkKiyaku');
const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;
btnSubmit.addEventListener('click', function(event) {
let message = [];
/*入力値チェック*/
if(inputName.value ==""){
message.push("氏名が未入力です。");
}
if(inputAge.value==""){
message.push("年齢が未入力です。");
}
if(inputMail.value==""){
message.push("メールアドレスが未入力です。");
}else if(!reg.test(inputMail.value)){
message.push("メールアドレスの形式が不正です。");
}
if(checkKiyaku.value){
message.push("利用規約に同意してください。");
}
if(message.length > 0){
alert(message);
return;
}
alert('入力チェックOK');
});
};
</script>
さっそく、いくつかの項目を未入力でボタンを押して確認をしてみましょう。
上記のようなエラーメッセージが表示されることが確認できましたね。
年齢などの項目は数値チェック処理を追加することで、利用者に入力や修正を促すことができます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はalertでのエラー表示でしたが、実際は画面に表示したり入力欄などの色を変えるなど、よりユーザーが気づきやすく修正しやすいように実装します。
入力値チェックはどんな項目にどのようなチェックをどこで行えばよいか、ユーザービリティとデータの整合性を担保する上でとても大切な機能です。
入力フォームなどの実装を行う際には、本記事の内容をぜひ参考にしてみてください。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
