JavaScriptを使ってフォームの入力チェックを行う方法について、基本的な手順を見出し付きで紹介します。これを参考にして、ユーザーが入力するデータの正確性を確保しましょう。
フォームのセットアップ
まずはHTMLでフォームを作成します。以下のコードは、名前とメールアドレスを入力するシンプルなフォームの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームバリデーション</title>
</head>
<body>
<form id="myForm">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="送信">
</form>
<div id="errorMessages"></div>
<script src="validation.js"></script>
</body>
</html>JavaScriptによる入力チェックの実装
次に、JavaScriptで入力チェックを行うコードを作成します。以下のコードをvalidation.jsファイルに保存します。
document.getElementById('myForm').addEventListener('submit', function(event) {
// エラーメッセージを表示するための要素
const errorMessages = document.getElementById('errorMessages');
errorMessages.innerHTML = ''; // エラーメッセージをリセット
// フォームのフィールドの値を取得
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// エラーメッセージを格納する配列
let errors = [];
// 名前のバリデーション
if (name === '') {
errors.push('名前を入力してください。');
}
// メールアドレスのバリデーション
if (email === '') {
errors.push('メールアドレスを入力してください。');
} else if (!validateEmail(email)) {
errors.push('有効なメールアドレスを入力してください。');
}
// エラーがある場合、フォームの送信を停止し、エラーメッセージを表示
if (errors.length > 0) {
event.preventDefault(); // フォームの送信を停止
errors.forEach(function(error) {
const errorMessage = document.createElement('p');
errorMessage.textContent = error;
errorMessages.appendChild(errorMessage);
});
}
});
// メールアドレスのバリデーション関数
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}バリデーションの詳細
名前のバリデーション
名前のフィールドが空でないかどうかをチェックします。空の場合、エラーメッセージを追加します。
メールアドレスのバリデーション
メールアドレスが空でないか、正しい形式で入力されているかをチェックします。正規表現を使用して形式を確認します。
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}エラーメッセージの表示
エラーメッセージを表示するために、errorMessages要素を使います。フォームの送信を停止し、各エラーメッセージを表示します。
if (errors.length > 0) {
event.preventDefault(); // フォームの送信を停止
errors.forEach(function(error) {
const errorMessage = document.createElement('p');
errorMessage.textContent = error;
errorMessages.appendChild(errorMessage);
});
}まとめ
JavaScriptで入力チェックを行う基本的な方法を紹介しました。これを応用して、より複雑なバリデーションを実装することも可能です。ユーザーが正確なデータを入力できるように、適切なバリデーションを設定しましょう。
