では、HTMLフォーム＋JavaScriptバリデーションを作り、
複数値を返す関数を使って安全にチェックする実務っぽい例を作ってみます。
1. HTMLフォームの基本
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームバリデーション例</title>
<style>
body { font-family: sans-serif; margin: 2rem; }
.error { color: red; }
</style>
</head>
<body>
<h2>ユーザー登録フォーム</h2>
<form id="userForm">
<label>
名前: <input type="text" id="name" />
</label>
<br><br>
<label>
年齢: <input type="text" id="age" />
</label>
<br><br>
<button type="submit">送信</button>
</form>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
- 名前と年齢を入力する簡単なフォームです。
- 結果を
<div id="result">に表示します。
2. JavaScript（バリデーション関数）
script.js に次のように書きます。
// バリデーション関数
function validateForm(name, age) {
const errors = [];
if (!name || name.trim() === "") {
errors.push("名前を入力してください。");
}
const ageNum = Number(age);
if (!age || isNaN(ageNum)) {
errors.push("年齢は数値で入力してください。");
} else if (ageNum < 0 || ageNum > 120) {
errors.push("年齢は0〜120の間で入力してください。");
}
if (errors.length > 0) {
return { isValid: false, errors };
}
return { isValid: true, data: { name: name.trim(), age: ageNum } };
}
// フォーム送信時の処理
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // ページリロードを防ぐ
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // 前回の表示をクリア
const result = validateForm(name, age);
if (result.isValid) {
resultDiv.innerHTML = `✅ 入力OK！ 名前: ${result.data.name}, 年齢: ${result.data.age}`;
} else {
result.errors.forEach(err => {
const p = document.createElement("p");
p.className = "error";
p.textContent = "❌ " + err;
resultDiv.appendChild(p);
});
}
});
3. この例のポイント
- 複数値を返す関数
validateForm()が{ isValid, data, errors }を返すことで
成功・失敗・加工済みデータを一度に扱える。
- 分岐処理が簡単
result.isValidで OK/NG を判断result.errorsをループしてエラー表示
- HTMLとJSを分離
- 実務では HTML + CSS + JS を分けることで可読性・保守性が向上
4. 動作例
| 入力 | 結果 |
|---|---|
| 名前: 空欄、年齢: 25 | ❌ 名前を入力してください。 |
| 名前: Taro、年齢: abc | ❌ 年齢は数値で入力してください。 |
| 名前: Taro、年齢: 25 | ✅ 入力OK！ 名前: Taro, 年齢: 25 |
5. 応用のコツ
- エラーメッセージを配列で返す → UIに複数表示が簡単
- データをオブジェクトで返す → 後でAPI送信やDB登録にも使える
- フォームが増えても
validateForm()のロジックだけ修正すればOK
💡 次のステップ（実務に近づける）
- フォームの項目を増やして、チェックも追加（メール、パスワード、電話番号など）
- 成功時に「JSON形式でサーバーに送信」
- サーバーからのレスポンスをオブジェクトで受け取り、結果表示