フォームバリデーションは、ウェブアプリケーションにおいて非常に重要な部分です。ユーザーからの入力が正確であることを確認することで、データの品質を保ち、セキュリティリスクを低減します。今回は、JavaScriptを使用してシンプルながら効果的なフォームバリデーションを実装する方法をご紹介します。
HTMLの準備
まずは、バリデーションを適用するフォームのHTMLを作成します。以下のコードは、ユーザー名、メールアドレス、パスワードを入力するシンプルなフォームです。
<!DOCTYPE html>
<html>
<head>
<title>フォームのバリデーション</title>
</head>
<body>
<form id="myForm">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
<span id="usernameError"></span>
<br>
<label for="email">メールアドレス:</label>
<input type="text" id="email" name="email">
<span id="emailError"></span>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
<span id="passwordError"></span>
<br>
<input type="submit" value="送信">
</form>
</body>
</html>JavaScriptでのバリデーション
次に、JavaScriptを使用してバリデーションを行います。以下のコードは、各入力フィールドに独自のバリデーションルールを適用しています。
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
let isValid = true;
// ユーザー名のバリデーション
const username = document.getElementById("username").value;
const usernameError = document.getElementById("usernameError");
if (username === "") {
usernameError.textContent = "ユーザー名は必須です。";
isValid = false;
} else {
usernameError.textContent = "";
}
// メールアドレスのバリデーション
const email = document.getElementById("email").value;
const emailError = document.getElementById("emailError");
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
emailError.textContent = "無効なメールアドレスです。";
isValid = false;
} else {
emailError.textContent = "";
}
// パスワードのバリデーション
const password = document.getElementById("password").value;
const passwordError = document.getElementById("passwordError");
if (password.length < 8) {
passwordError.textContent = "パスワードは最低8文字必要です。";
isValid = false;
} else {
passwordError.textContent = "";
}
if (!isValid) {
event.preventDefault();
}
});
});まとめ
JavaScriptを使用したフォームバリデーションは、データの品質とセキュリティを確保する効果的な手段です。この記事で紹介したようなシンプルな実装でも、多くの一般的な問題を解決できます。更に高度なバリデーションが必要な場合は、正規表現や外部ライブラリを使用することで、より堅牢なバリデーションを構築できます。
