【Javascript】入力フォームバリデーションを実装する -作って学ぶWeb制作-

body {
    font-family: 'Segoe UI', sans-serif;
    height: 100vh;
}

header {
    text-align: center;
}

form {
    padding: 30px;
    margin: 0 auto;
    border: 3px solid #2980b9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 450px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

.required {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
    padding: 10px 15px;
    width: 80%;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
}

input:focus {
    border-color: #66afe9;
    outline: none;
}

.error {
    color: #e74c3c;
    font-size: 0.85em;
    margin-top: 5px;
}

.success {
    border-color: #2ecc71 !important;
}

.invalid {
    border-color: #e74c3c !important;
}

.checkbox-group,
.radio-group {
    margin-top: 8px;
}

button {
    width: 100%;
    padding: 12px;
    background: #87cfff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: #64b0e2;
}

.input-example {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
    padding-left: 10px;
}

.phone-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

.phone-group input {
    width: 14%;
}

const form = document.getElementById("contactForm");
const fields = {
    name: {
        input: document.getElementById("name"),
        error: document.getElementById("nameError"),
        validate: value => value.trim() !== "",
        message: "氏名を入力してください。"
    },
    phone: {
        input: [
            document.getElementById("phone1"),
            document.getElementById("phone2"),
            document.getElementById("phone3")
        ],
        error: document.getElementById("phoneError"),
        validate: values => values.every(value => /^\d+$/.test(value) && value.length > 0) &&
            (values.join("").length === 10 || values.join("").length === 11),
        message: "正しい電話番号を入力してください（10～11桁の数字）。"
    },
    email: {
        input: document.getElementById("email"),
        error: document.getElementById("emailError"),
        validate: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
        message: "正しいメールアドレスを入力してください。"
    }
};

const validateField = (field) => {
    const inputs = Array.isArray(field.input) ? field.input : [field.input];
    const values = inputs.map(input => input.value.trim());
    let isValid;
    if (inputs.length > 1) {
        // 電話番号のような複数inputなら配列で渡す
        isValid = field.validate(values);
    } else {
        // 普通の入力欄なら文字列を渡す
        isValid = field.validate(values[0]);
    }

    inputs.forEach(input => input.classList.remove("success", "invalid"));
    if (!isValid) {
        field.error.textContent = field.message;
        inputs.forEach(input => input.classList.add("invalid"));
        return false;
    } else {
        field.error.textContent = "";
        inputs.forEach(input => input.classList.add("success"));
        return true;
    }
};

// 入力時リアルタイムバリデーション
Object.entries(fields).forEach(([key, field]) => {
    const inputs = Array.isArray(field.input) ? field.input : [field.input];
    inputs.forEach(input => {
        input.addEventListener("input", () => validateField(field));
    });
});

form.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        event.preventDefault();
    }
});

form.addEventListener("submit", function (event) {
    event.preventDefault();
    let valid = true;

    Object.values(fields).forEach(field => {
        if (!validateField(field)) valid = false;
    });

    // チェックボックス
    const agree = document.getElementById("agree");
    const agreeError = document.getElementById("agreeError");
    if (!agree.checked) {
        agreeError.textContent = "利用規約に同意してください。";
        valid = false;
    } else {
        agreeError.textContent = "";
    }

    // ラジオボタン
    const genderChecked = document.querySelector('input[name="gender"]:checked');
    const genderError = document.getElementById("genderError");
    if (!genderChecked) {
        genderError.textContent = "性別を選択してください。";
        valid = false;
    } else {
        genderError.textContent = "";
    }

    if (valid) {
        alert("送信完了しました！");
        form.reset();
        Object.values(fields).forEach(field => {
            const inputs = Array.isArray(field.input) ? field.input : [field.input];
            inputs.forEach(input => input.classList.remove("success"));
        });
    }
});

// --- 電話番号 自動カーソル移動 ---
const phoneInputs = [document.getElementById("phone1"), document.getElementById("phone2"), document.getElementById("phone3")];
phoneInputs.forEach((input, index) => {
    input.addEventListener("input", () => {
        if (input.value.length >= input.maxLength) {
            if (index < phoneInputs.length - 1) {
                phoneInputs[index + 1].focus();
            }
        }
    });
});