How to create an Ajax, validated form

Implémentation

Étape 1: Inclusion des fichiers

Étant donné que cette méthode utilise jQuery, quelques fichiers ont besoin d'être inclus avant que l'on puisse avancer. La librairie jQuery bien sûre, le plugin validation, qui vérifiera que les champs requis sont bien renseigné par l'utilisateur, et le plugin form, qui s'occupera d'envoyer les données via ajax.

/** jQuery Inclusion **/
<script type="text/javascript" src="Chemin_vers/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Chemin_vers/jquery.validate.js"></script>
<script type="text/javascript" src="Chemin_vers/jquery.form.js"></script>

Étape 2: Le code du Formulaire

Une fois que ces fichiers sont prêts à être utilisé, nous allons créer le code html d'un formulaire de commentaire classique, comprenant 4 champs: un pseudo, une adresse email, une url de site web et un message:

<form id="comment_form" action="/postcomment" method="post">
 
  <label for="pseudo">Pseudo</label>
  <input id="pseudo" name="pseudo" class="required" type="text" />
 
  <label for="mail">Email:</label>
  <input id="mail" name="mail" class="required email" type="text" />
 
  <label for="website">Website:</label>
  <input id="website" name="website" type="text" />
 
  <label for="message">Message:</label>
  <textarea id="message" name="message" class="required"></textarea>
 
  <input class="button" type="submit" value="Envoyer" />
</form>

Comme pour des formulaires classiques, les données seront envoyées à la page spécifiée dans l'attribut target (ici '/postcomment').

Il est à noter que la classe 'required' a été ajoutée à chaque champ obligatoire.

Si vous avez besoin de plus d'information sur le plugin validation, vous en trouverez sur sa page dédiée.

Étape 3: Validation et envoi par JavaScript

Dans cet exemple particulier, le JavaScript est l'élément qui synchronise tout.

Comme vous pouvez le voir dans le code suivant, on enclenche la validation JavaScript (ligne 2), ce qui veut dire que le plugin validation va vérifier que chaque champ ayant la classe 'required' a bien été remplis par l'utilisateur. Ensuite, ligne 3, on change le comportement par défaut du formulaire, au lieu d'avoir une soumission classique, on en aura une via Ajax (ligne 4).

jQuery(document).ready(function(){
  jQuery("#comment_form").validate({ //Validation
    submitHandler: function(form) { //Event fired on form submission
      jQuery("#comment_form").ajaxSubmit(function(data){ //Ajax Submit
        jQuery("#comments_list").prepend(data); //Result display
        //You can clear the form at this stage if you want
      });
    }
  });	
});

Après la soumission du formulaire, nous allons afficher le résultat à l'utilisateur suivant ce qui est retourné par la requête ajax.

Étape 4: Le Résultat de la requête Ajax

Dans le JavaScript, le résultat de cette requête, retourné par la page '/postcomment' est contenu dans la variable data (ligne 4 du code jQuery ci dessus). Sachant cela, vous pouvez utiliser cette page pour retrouver les données postées comme vous le feriez habituellement, par exemple:

if(!empty($_POST)) { //Get the post values
  $comment_pseudo = htmlentities($_POST['pseudo'], ENT_QUOTES);
  $comment_mail = htmlentities($_POST['mail'], ENT_QUOTES);
  $comment_message = htmlentities($_POST['message'], ENT_QUOTES);
  $comment_website = htmlentities($_POST['website'], ENT_QUOTES);
}

Tout ce que vous allez afficher dans cette page '/postcomment', sera présent dans la variable JavaScript data. Du coup, il y a plusieurs solution pour présenter un résultat à l'utilisateur.

La meilleure pratique consiste à retourner les valeurs postées sous forme d'un tableau json. Ce tableau sera comme nous l'avons dis disponible dans le JavaScript, et il sera donc possible à partir de celui ci de créer le code htm correspondant afin de l'insérer dans la page.

{
	"PSEUDO":"'.$comment_pseudo.'",
	"EMAIL":"'.$comment_mail.'",
	"MESSAGE":"'.$comment_message.'",
	"WEBSITE":"'.$comment_website.'"
}

Depuis ce tableau json, nous allons créer le code html voulu, et l'insérer dans la page. Le code jQuery devient donc:

jQuery(document).ready(function(){
  jQuery("#comment_form").validate({ //Validation
    submitHandler: function(form) { //Event fired on form submission
      jQuery("#comment_form").ajaxSubmit(function(data){ //Ajax Submit
      	data = JSON.parse(data); // Get the json returned
      	var comment='<div class="comment">';
      	comment+=' <div class="comment_msg">'+data.MESSAGE+'</div>';
      	comment+=' <div class="comment_footer">';
      	comment+='  From: <a href="'+data.WEBSITE+'">'+data.PSEUDO+'</a>';
      	comment+=' </div>';
      	comment+='</div>';
        jQuery("#comments_list").prepend(comment); //Result display
        //You can clear the form at this stage if you want
      });
    }
  });	
});

Comme nous l'avons dis, la variable data contient le résultat retourné par la page '/postcomment', qui dans notre cas, est un array json (ligne 5). A partir de cet array, on produit le code html du commentaire (lignes 6-11), et on l'insert dans la page (ligne 12).

Si vous n'êtes pas très à l'aise avec json, il est aussi possible d'écrire le code html du commentaire directement dans la page postcomment. Il sera du coup déjà prêt quand il sera passé au JavaScript (en supprimeant la ligne 5), mais c'est une solution moins efficace.

En résumé

Créer un formulaire Ajax est en fait très similaire à la méthode classique étant donné que le plugin form s'occupe du gros du travail à votre place. Quand un utilisateur appuiera sur le bouton d'envoi, le plugin validation s'assurera que chaque champ obligatoire est remplis, puis passera la main au plugin form, qui s'occupera d'envoyer les données via Ajax. Vous pourrez ainsi retrouvez les données dans la page de destination comme vous le feriez pour une requête post classique, et travailler avec elles pour retourner un résultat à l'utilisateur.

Partager:

Vous seriez peut être aussi intéressé par::

Poster un Commentaire

Commentaires récents

<><>

De <> à 17:35 07/12/09 { Répondre }