Validation formulaire via Ajax

Mathieu Giacometti
Javascript

Bonjour,

Voila je suis novice dans l'utilisation d'Ajax et je me heurte à un problème. Je n'arrive pas à valider mon formulaire via un appel Ajax.

Voici donc la partie du code JS qui concerne cette action ...

$("#formulaire").submit(function(e){

         e.preventDefault();

         var err = '';
         var err1 = ''; 
         var err2 = '';
         var err3 = '';
         //var succes = '';

         var nom = $("#nom").value();
         var email = $("#email").value();
         var message = $("#message").value();

         if (nom.length == 0){
            err1 = 'Veuillez indiquer votre nom.';
            err = err+err1;  
         }

         if (!isEmail(email)){
            err2 = 'Veuillez saisir un email valide.';
            err = err+err2;
         }

         if (message.length < 20){
            err3 = 'Veuillez entrer un message de plus de 20 caractères.';
            err = err+err3;
         }

         console.log('on est arrivé jusque là.') 

         if (err.length == 0){

            $.ajax({

               url : 'traitement_formulaire_contact.php', // La ressource ciblée
               type : 'POST', // Le type de la requête HTTP.
               data : $("#formulaire").serialize , // On fait passer nos variables, exactement comme en GET, au script more_com.php
               //dataType : 'html', // On reprend le même id que dans le précédent chapitre

               success : function(){
                     alert("Votre email a bien été envoyé."); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
               },

               error : function(){
                     alert("Naze.");
               },

               // complete : function(resultat, statut){
               //}

            });

         }

      });

});

... suivi de mon code PHP

<?php

//var_dump($nom);

// TRAITEMENT LORSQUE LE FORMULAIRE EST ENVOYÉ.

if($_POST){

    $err = '';
    $err1 = '';
    $succes = '';

    extract($_POST);
    //echo $nom;
    //echo $email;
    //echo $message;

    if (empty($nom)){
        $err1 = "Veuillez indiquer votre nom.";
        $err = $err.$err1.'<br>';   
    }

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $err2 = "Veuillez saisir un email valide.";
        $err = $err.$err2.'<br>';
    }

    if (empty($message) || strlen($message)<20){
        $err3 = 'Veuillez entrer un message de plus de 20 caractères.';
        $err = $err.$err3.'<br>';
    }

    if (empty($err)) {

        //Traitement pour envoyer le mail.

        $to = 'mathieu.giacometti@gmail.com';
        $subject = 'Message de '.$nom;
        $headers = 'From: '.$nom.' <'.$email.'>'."\r\n";
        $headers .= 'Reply-to: '.$nom.'<'.$email.'>'."\r\n";
        $headers .= "MIME-Version: 1.0"."\r\n";
        $headers .= 'Content-type: text/html; charset=\"UTF-8\"'."\r\n";
        if(mail($to,$subject,$message,$headers)){
            $succes = 'Votre email a été envoyé avec succès.';
        }

    }

}

?>

... puis du code html du formulaire

<h1>Contact</h1>
<div class='col-xs-6 col-xs-offset-1 col-sm-6 col-sm-offset-1 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1'>
    <div>
        <form id='formulaire' action='traitement_formulaire_contact.php' method='post'>
            <label for='nom'>Nom : </label>
            <input type='text' name='nom' id='nom' value='' placeholder='Votre nom...'/>
            <label for='email'>Email :</label>
            <input type='text' name='email' id='email' value='' placeholder='Votre email...'/>
            <label for='message'>Message :</label>
            <textarea name='message' id='message' rows='15' cols='30' placeholder='Votre message...'></textarea>
            <input name='bouton' id='bouton' type='submit' value='Envoyer'/>
        </form>
    </div>
</div>

Pour le moment, tout ce que j'obtiens c'est d'attérir sur ma page traitement_formulaire_contact.php qui contient le code PHP sus mentionné.
La page est blanche... Même mon var_dump($nom) n'a aucun effet.

Si une âme charitable pouvait m'aider, ce serait vraiment sympa.

Bonne soirée à tous.

13 réponses

Pierrot01

Salut,
$("#formulaire").serialize() à la place de $("#formulaire").serialize
@plus
Pierre

Mathieu Giacometti
Auteur

Merci pour ta reponse, j´ai changé ça mais ça ne marche toujours pas malheureusement. Tu aurais une autre idée stp?
Merci d'avance!

Pierrot01

il se passe quoi ?
tu as ouvert la fenêtre de déboguage de javascript ?
@plus

Mathieu Giacometti
Auteur

Rien justement, je suis juste redirigé vers traitement_formulaire_contact.php et rien ne se passe. :/ Rien dans la console.

Mathieu Giacometti
Auteur

Je me permets de rajouter l'ensemble de mon script JS, ainsi que ma page html de base.

<!DOCTYPE html>

<html lang="fr">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <title>Site CV Mathieu BIDULE</title>

    <body>

        <div id="container" class="container">

            <div id="header">
                <p>CV de <b>Mathieu BIDULE</b></p>
                <p>Apprenant intégrateur / développeur Web</p>
            </div>

            <nav id="menu" class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="row">
                        <ul class="nav navbar-nav">
                             <li id="presentation" class="menu_selected col-sm-2 col-md-2"><a href="#">Présentation</a></li>
                             <li id="pro" class="active col-md-2 col-sm-2"><a href="#">Parcours Pro</a></li>
                             <li id="formations" class="active col-md-2 col-sm-2"><a href="#">Formations</a></li>
                             <li id="competences" class="active col-md-2 col-sm-2"><a href="#">Compétences</a></li>
                             <li id="hobbies" class="active col-md-2 col-sm-2"><a href="#">Hobbies</a></li>
                             <li id="contact" class="active col-md-2 col-sm-2"><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

            <div id="affichage" class="row">
                <h1>Présentation</h1>
                <p>En quête de reconversion professionnelle et venant tout juste de terminer une formation d'intégrateur et développeur-web au sein de l'organisme WebForce3 ( labellisé "Grande École du Numérique "), je suis actuellement à la recherche d'un stage pour mettre en pratique mes récents acquis, obtenir de nouvelles compétences, et ainsi gagner en expérience.</p>
                <p> Pourquoi la programmation Web? C'est un univers qui associe esthétique, créativité conceptuelle et réflexion algorithmique. De plus, c'est un outil devenu aujourd'hui presque incontournable quel que soit le secteur d'activité dans lequel on souhaite exercer. Autant de raisons qui m'ont conduit à opter pour ce choix dans l'optique d'un nouveau départ professionnel.</p><br><br>
                <div class='encart col-xs-12 col-sm-6'>
                    <p>Prénom : MATHIEU</p>
                    <p>Nom : BIDULE</p>
                    <p id="age"></p>
                    <p>Ville : Paris - 75010</p>
                    <p>E-mail : monmail@gmail.com</p>
                    <p>Tél. : 06-06-06-06-06</p>
                </div>
            </div>

            <div id="footer" class="row">

                <div>
                © 2017 Mathieu BIDULE, Tous droits réservés.
                </div>

            </div>

        </div>

    <script src="js/script.js" type="text/javascript"></script>

    </body>

</html>
$(function(){

      function monAge() {
         var aujourd_hui = new Date();
         var ma_naissance = new Date('1984','05','02');
         var age = aujourd_hui.getFullYear() - ma_naissance.getFullYear();
         var m = aujourd_hui.getMonth()+ 1 - ma_naissance.getMonth();
         if (m < 0 || (m == 0 && aujourd_hui.getDate() < ma_naissance.getDate())) {
              age=age--;
         }
         return age;
      }

      function isEmail(email){
         // La 1ère étape consiste à définir l'expression régulière d'une adresse email
         var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
         return regEmail.test(email);
      }

      $("#age").html("Âge : "+monAge());

    $("#presentation").click(function(){
        $("#presentation").removeClass("active");
        $("#presentation").addClass("menu_selected");
        $("#pro").removeClass("menu_selected");
        $("#pro").addClass("active");
        $("#formations").removeClass("menu_selected");
        $("#formations").addClass("active");
        $("#competences").removeClass("menu_selected");
        $("#competences").addClass("active");
        $("#hobbies").removeClass("menu_selected");
        $("#hobbies").addClass("active");
         $("#contact").removeClass("menu_selected");
         $("#contact").addClass("active");
        $("#affichage").load("presentation.html");
    });

    $("#pro").click(function(){
        $("#pro").removeClass("active");
        $("#pro").addClass("menu_selected");
        $("#presentation").removeClass("menu_selected");
        $("#presentation").addClass("active");
        $("#formations").removeClass("menu_selected");
        $("#formations").addClass("active");
        $("#competences").removeClass("menu_selected");
        $("#competences").addClass("active");
        $("#hobbies").removeClass("menu_selected");
        $("#hobbies").addClass("active");
         $("#contact").removeClass("menu_selected");
         $("#contact").addClass("active");
        $("#affichage").load("pro.html");
    });

    $("#formations").click(function(){
        $("#formations").removeClass("active");
        $("#formations").addClass("menu_selected");
        $("#presentation").removeClass("menu_selected");
        $("#presentation").addClass("active");
        $("#pro").removeClass("menu_selected");
        $("#pro").addClass("active");
        $("#competences").removeClass("menu_selected");
        $("#competences").addClass("active");
        $("#hobbies").removeClass("menu_selected");
        $("#hobbies").addClass("active");
         $("#contact").removeClass("menu_selected");
         $("#contact").addClass("active");
        $("#affichage").load("formations.html");
    });

    $("#competences").click(function(){
        $("#competences").removeClass("active");
        $("#competences").addClass("menu_selected");
        $("#presentation").removeClass("menu_selected");
        $("#presentation").addClass("active");
        $("#pro").removeClass("menu_selected");
        $("#pro").addClass("active");
        $("#formations").removeClass("menu_selected");
        $("#formations").addClass("active");
        $("#hobbies").removeClass("menu_selected");
        $("#hobbies").addClass("active");
         $("#contact").removeClass("menu_selected");
         $("#contact").addClass("active");
       $("#affichage").load("competences.html");
      });

    $("#hobbies").click(function(){
        $("#hobbies").removeClass("active");
        $("#hobbies").addClass("menu_selected");
        $("#presentation").removeClass("menu_selected");
        $("#presentation").addClass("active");
        $("#formations").removeClass("menu_selected");
        $("#formations").addClass("active");
        $("#pro").removeClass("menu_selected");
        $("#pro").addClass("active");
        $("#competences").removeClass("menu_selected");
        $("#competences").addClass("active");
         $("#contact").removeClass("menu_selected");
         $("#contact").addClass("active");
         $("#affichage").load("hobbies.html");
      });   

      $("#contact").click(function(){
         $("#contact").removeClass("active");
         $("#contact").addClass("menu_selected");
         $("#hobbies").removeClass("menu_selected");
         $("#hobbies").addClass("active");
         $("#presentation").removeClass("menu_selected");
         $("#presentation").addClass("active");
         $("#formations").removeClass("menu_selected");
         $("#formations").addClass("active");
         $("#pro").removeClass("menu_selected");
         $("#pro").addClass("active");
         $("#competences").removeClass("menu_selected");
         $("#competences").addClass("active");
         $("#affichage").load("contact.html");
      });   

      $("#formulaire").submit(function(e){

         //e.preventDefault();

         var err = '';
         var err1 = ''; 
         var err2 = '';
         var err3 = '';
         //var succes = '';

         alert("Hello! I am an alert box!!");

         var nom = $("#nom").value();
         var email = $("#email").value();
         var message = $("#message").value();

         if (nom.length == 0){
            err1 = 'Veuillez indiquer votre nom.';
            err = err+err1;  
         }

         if (!isEmail(email)){
            err2 = 'Veuillez saisir un email valide.';
            err = err+err2;
         }

         if (message.length < 20){
            err3 = 'Veuillez entrer un message de plus de 20 caractères.';
            err = err+err3;
         }

         console.log('on est arrivé jusque là.') 

         if (err.length == 0){

            $.ajax({

               url : './traitement_formulaire_contact.php', // La ressource ciblée
               type : 'POST', // Le type de la requête HTTP.
               data : $("#formulaire").serialize() , // On fait passer nos variables, exactement comme en GET, au script more_com.php
               //dataType : 'html', // On reprend le même id que dans le précédent chapitre

               success : function(){
                     alert("Votre email a bien été envoyé."); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
               },

               error : function(){
                     alert("Naze.");
               },

               // complete : function(resultat, statut){
               //}

            });

         }

      });

});
Mathieu Giacometti
Auteur

Petite nouveauté. Jusqu'à présent, l'événement $("#formulaire").submit(function(e) ne produisait aucune action malgré les console.log et les alert que j'avais placé à l'intérieur. J'ai tenté de mettre le $("#formulaire").submit(function(e) à l'intérieur du bout de code contact.html où le formulaire est contenu et il semble qu'il se passe quelque chose.

Mes test sur les 3 champs en JS sont reconnus et le alert("Votre email a bien été envoyé." est bien affiché. Le problème c'est que mon mail n'est pas parti donc je pense que la communication entre ma requête Ajax et mon traitement_formulaire_contact.php ne se fait pas. Si quelqu'un pouvait m'aider ce serait vraiment cool. :-)

Pierrot01

Salut,

//e.preventDefault();

Pourquoi c'est en commentaire ?

@plus

Pierre

Mathieu Giacometti
Auteur

Je l'avais déjà corrigé suite à mon dernier post mais ça ne marche toujours pas. Le problème doit venir du fait que la page ciblée par ajax "traitement_formulaire_contact.php" n'arrive pas à capter ce que je lui envoie ou alors n'arrive pas à l'interprêter... en regardant ma requête ajax y'a rien qui choque? Je ne sais pas je suis vraiment débutant et je ne suis aps trop à l'aise avec serialize, le format json etc. Ici on n'a pas à se servir de JSON on est bien d'accord?

tamplan

Bonsoir,

Je pense que tu confonds un peu les choses au niveau de ton code en js et notament les parties success et error :
success est appelée une fois que la requête a bien été traitée du côté du serveur (côté php donc) que ton email soit envoyé ou pas.

Je t'invite à faire plusieurs choses :

  • oublie pour le moment la partie email et retourne simple une chaîne de caractère avec les bons headers : quel doit être le type le valeur retournée par php ? du code html ? du code js ? (cherche sur internet un cas simple de requête en ajax)
  • utilise effectivement du json : tu pourras indiquer si l'email est bien envoyé ou pas (email_send: true/false) et le message d'accompagnement (email envoyé/erreur de tel ou tel champ manquant ou invlalide)
  • utilise du json côté js et côté php pour gérer tes erreurs, si ton tableau d'erreurs dans ton json côté js est vide est bien tu n'as pas d'erreur justement et si il n'est pas vide tu as au moins une erreur

N'aies pas peur de gérer ça en json en utilisant les id de ton formulaire dans tes messages d'erreur ce qui te permettra par exemple de rajouter le message d'erreur sous le champ correspondant (id et clé du json en commum : nom, email, message ...)

Mathieu Giacometti
Auteur

Je te remercie de ta réponse, je vais essayer de voir mais j'avais déjà cherché et j'avais pas réussi à comprendre. Comment spécifie-t-on ce que doit nous retourner un fichier PHP?

tamplan

Avec la fonction header https://secure.php.net/manual/fr/function.header.php

Je te cherche un exemple de requête ajax...

tamplan

Ici on parle du dataType attendu par la fonction ajax de jquery https://openclassrooms.com/courses/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax

Un exemple côté php pour retourner un json http://www.finalclap.com/tuto/cours-jquery-61/ajax-67/

Enfin, je suppose que tout est très bien expliqué dans cette vidéo https://www.grafikart.fr/tutoriels/jquery/ajax-jquery-520

Mathieu Giacometti
Auteur

Je te remercie infiniment pour ton aide. Je vais etudier ça et je reviens vers toi. :-)