Problème affichage DIV (js, PHP)

Bonjour

Je dois afficher les données dans ma DIV dans mon fichier index.php où se trouve mon simple formulaire.
J'ai un fichier javascript de vérification des chams et de l'email avec un fetchData(); vers un fichier api.php.
Les données s'affiche dans l'URL et j'ai un problème réseau javascript xhr.send();
J'ai aussi un problème lien a un doublon de validation récupération email.
Pouvez vous m'aider je suis en stah=ge de 1ère et je bloque.....

Merci beaucoup

Voici mon code index.php --> formulaire

<form id="contactForm" >
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <div id="emailError" class="error"></div> <!-- Ajout de la div pour afficher l'erreur -->

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    <button id="envoyer">Envoyer</button>
</form>
<div id="resultat" class="info-box"></div>

Voici le code js:

document.addEventListener('DOMContentLoaded', function() {
let button = document.getElementById('envoyer');

button.addEventListener('click', function () {

    // Récupérer les valeurs des champs
    let nom = document.getElementById('nom').value;
    let email = document.getElementById('email').value;
    let message = document.getElementById('message').value;

    // Valider l'e-mail
    if (validateEmail(email)) {

        fetchData(nom, email, message);
    }
});

function validateEmail(email) {
    // Vérification de l'email
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    let isValidEmail = emailRegex.test(email);

    if (!isValidEmail) {
        document.getElementById('email').style.border = '2px solid red';
        return false;
    } 
    // Réinitialiser la bordure si l'e-mail est valide
    document.getElementById('email').style.border = '';
    return true;
}

function fetchData(nom, email, message) {
    // Création de l'objet XMLHttpRequest
    let xhr = new XMLHttpRequest();

    // Construire l'URL avec les paramètres du formulaire
    let url = `http://127.0.0.1/api.php?nom=${nom}&email=${email}&message=${message}`;

    // Configuration de la requête GET
    xhr.open('GET', url, true);

    // Gestionnaire d'événement pour la réception de la réponse
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 400) {
            // Succès
            try {
                let responseData = xhr.responseText;
                console.log('Contenu de la réponse:', responseData);
                afficherResultat(responseData);
                console.log('Requête réussie:', responseData);

            } catch (error) {
                console.error('Erreur lors de la conversion JSON :', error);
            }

        } else {
            // Erreur
            console.log('Erreur lors de la requête.', xhr.status, xhr.statusText);
        }
    };

    // Gestionnaire d'événement pour les erreurs de réseau
    xhr.onerror = function() {
        console.log('Erreur réseau.');
    };

    // Envoi de la requête
    xhr.send();
}

function afficherResultat(data) {
    // Afficher le résultat dans la div avec l'id "resultat"
    let resultatDiv = document.getElementById('resultat');
    // Créer le contenu HTML en utilisant les données de l'objet "data"
    let htmlContent = `
        <div id="resultat" class="info-box">
            <p>Nom: ${data.nom || 'Non spécifié'}</p>
            <p>Email: ${data.email || 'Non spécifié'}</p>
            <p>Message: ${data.message || 'Non spécifié'}</p>
        </div>`;

    // Remplacer le contenu actuel de la div avec le nouveau contenu généré
    resultatDiv.innerHTML = htmlContent;
}
});

Voici mon code api.php

<?php
error_log("Nom: $nom, Email: $email, Message: $message");
// Vérifie si des données POST existent
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$nom = isset($_GET['nom']) ? $_GET['nom'] : "";
$email = isset($_GET['email']) ? $_GET['email'] : "";
$message = isset($_GET['message']) ? $_GET['message'] : "";

// Construire la structure HTML de la réponse
$response = "
    <div id="resultat "class='info-box'>
        <p>Nom: $nom</p>
        <p>Email: $email</p>
        <p>Message: $message</p>
    </div>";

// Envoyer la réponse au navigateur
echo $response;
} else {
echo "Aucune donnée GET reçue.";
}
?>