5-1. PHPとJavaScriptでフォーム処理

<form id="userForm" action="process.php" method="POST">
    <div class="form-group">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        <span class="error" id="nameError"></span>
    </div>
    
    <div class="form-group">
        <label for="email">メール:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span>
    </div>
    
    <button type="submit">送信</button>
</form>

const form = document.getElementById('userForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');

// 名前のバリデーション
nameInput.addEventListener('input', function() {
    const error = document.getElementById('nameError');
    if (this.value.length < 2) {
        error.textContent = '名前は2文字以上で入力してください';
    } else {
        error.textContent = '';
    }
});

// メールのバリデーション
emailInput.addEventListener('input', function() {
    const error = document.getElementById('emailError');
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    error.textContent = pattern.test(this.value) ? '' : '有効なメールアドレスを入力';
});

// フォーム送信
form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (validateForm()) submitFormData();
});

<?php
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$errors = [];

// バリデーション
if (strlen($name) < 2) $errors[] = '名前は2文字以上';
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = '無効なメール';

header('Content-Type: application/json');
if (!empty($errors)) {
    echo json_encode(['success' => false, 'errors' => $errors]);
    exit;
}

echo json_encode(['success' => true, 'message' => '登録完了']);
?>

function submitFormData() {
    const formData = new FormData(form);
    
    fetch('process.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            form.reset();
        } else {
            alert(data.errors.join('\n'));
        }
    })
    .catch(error => alert('通信エラー'));
}