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>
さっそく、いくつかの項目を未入力でボタンを押して確認をしてみましょう。
上記のようなエラーメッセージが表示されることが確認できましたね。
年齢などの項目は数値チェック処理を追加することで、利用者に入力や修正を促すことができます。
まとめ
今回はalertでのエラー表示でしたが、実際は画面に表示したり入力欄などの色を変えるなど、よりユーザーが気づきやすく修正しやすいように実装します。
入力値チェックはどんな項目にどのようなチェックをどこで行えばよいか、ユーザービリティとデータの整合性を担保する上でとても大切な機能です。
入力フォームなどの実装を行う際には、本記事の内容をぜひ参考にしてみてください。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
