はじめに
Webサイトやアプリケーションを作る際に、フォームは欠かせない要素のひとつです。入力内容に間違いがあったまま送信されてしまうと、サーバー側でエラーになったり、意図しないデータが保存されてしまったりする危険があります。そこで必要になるのが フォームの入力チェック（バリデーション） です。
今回は、JavaScriptでバリエーションチェックを実施する方法をLogとして記載していきたいと思います。
バリデーションとは
バリデーションとは、入力された値が「正しい形式かどうか」を確認する仕組みのことです。以下のようなバリエーションを組み合わせることで、実用的で安全なフォームが作れます。
よく使うバリデーションの種類
| 種類 | 概要 |
| 必須入力チェック | 空欄になっていないか確認 |
| 文字数チェック | 最小文字数や最大文字数の制限 |
| 形式チェック | メールアドレスや電話番号、郵便番号などのフォーマットが正しいか |
| 数値チェック | 数値が入力されているか、範囲内かどうか |
| 一致チェック | パスワードと確認用パスワードが一致しているか |
バリデーションの実装方法
htmlとJavaScriptを使用して、簡単な実装例を試してみます。
html
<form id="myForm">
<label>ユーザー名: <input type="text" id="username" required></label><br>
<label>メールアドレス: <input type="email" id="email" required></label><br>
<label>パスワード: <input type="password" id="password" required></label><br>
<button type="submit">送信</button>
</form>
<div id="error"></div>
JavaScript
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // デフォルト送信を止める
let errors = [];
let username = document.getElementById("username").value.trim();
let email = document.getElementById("email").value.trim();
let age = document.getElementById("age").value.trim();
let password = document.getElementById("password").value;
// 必須入力チェック（念のためJSでも確認）
if (username === "" || email === "" || age === "" || password === "") {
errors.push("すべての項目を入力してください");
}
// 文字数チェック（ユーザー名は3文字以上）
if (username.length < 3) {
errors.push("ユーザー名は3文字以上にしてください");
}
// メール形式チェック
let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,}$/;
if (!email.match(emailPattern)) {
errors.push("正しいメールアドレスを入力してください");
}
// 数値チェック（年齢は数値で、0〜120の範囲）
if (isNaN(age) || age < 0 || age > 120) {
errors.push("年齢は0〜120の数値で入力してください");
}
// パスワード形式チェック（8文字以上、英字と数字を含む）
let passwordPattern = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$/;
if (!password.match(passwordPattern)) {
errors.push("パスワードは8文字以上で、英字と数字を含めてください");
}
// エラーを表示
let errorDiv = document.getElementById("error");
if (errors.length > 0) {
errorDiv.innerHTML = errors.join("<br>");
} else {
errorDiv.innerHTML = "送信成功！";
// 後続のサーバ送信処理などを記載
}
});
required 属性について
フォーム要素には、HTMLだけで簡単に入力を必須にできる required 属性 があります。ただし、required は「空欄かどうか」しかチェックできません。
文字数や形式のような細かい条件を指定するには、JavaScriptによるバリデーションが必要になります。
例
<input type="text" required>
まとめ
JavaScriptを使えば、フォーム入力のチェックをリアルタイムで行えるため、ユーザーが入力間違いにすぐ気づけるようになります。
今回紹介した例では「必須入力」「文字数」「形式」「数値」「一致チェック」をすべて取り入れました。実際の開発ではこれに加えて、電話番号や郵便番号などの独自フォーマットのチェックを追加したり、リアルタイムでエラーを表示したりと、さらに使いやすい工夫が可能です。
まずは今回のサンプルを動かしてみて、少しずつカスタマイズして行きましょう。
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント