Vérifier les données d’un formulaire avec AJAX

Dernièrement je suis encore tombé sur l'un de ces longs formulaires où l'on doit indiquer plein d'informations, se choisir un pseudo et lorsqu'on le valide, les informations sont envoyées vers le serveur, qui les contrôle, et si on a commis une erreur, on se retrouve sur le même formulaire avec le message d'erreur "Pseudo déjà utilisé merci d'en choisir un autre".

C'est un peu pénible surtout qu'il faut alors ressaisir les mots de passe qui se sont effacés, et le code de vérification anti-robot.

Il y a pourtant une technique simple, qui existe depuis longtemps et qui fonctionne à merveille : L'AJAX et son XMLHttpRequest.

AJAX : Asynchronous JavaScript and XML, c'est un nom qui a été donné à un ensemble de techniques qui permettent de modifier les informations d'une page web sans avoir à la recharger. Le "client" est donc sollicité un peu plus et le "serveur" un peu moins.

Concrètement, dès qu'une personne a saisi le pseudo désiré, une requête va être automatiquement envoyée au serveur afin de vérifier que ce pseudo n'est pas déjà utilisé.
En retour on affichera un flag vert à côté du champ pseudo s'il est libre et une croix rouge s'il existe déjà. Dans ce cas on verrouillera la possibilité de valider le formulaire en affichant une alerte javascript.

La classe XMLHttpRequest

Attributs

readyState
code d'état qui passe successivement de 0 à 4 indiquant qu'il est "prêt"
status
200 si tout est ok et 404 si page non trouvée
responseText
la réponse sous forme d'une chaîne de caractères
responseXml
la réponse sous forme xml on utilisera  les méthodes de DOM pour les extraire
onreadystatechange
on lui assigne une fonction qui sera appelée lors d'un changement d'état

Méthodes

open (mode, url, boolean)
- mode : 2 valeurs possibles qui sont GET ou POST
- url : la page à appeler
- boolean : true pour asynchrone et false pour synchrone
send("arg")
- des parametres, en général les données à analyser

La création de cet objet est différente selon le navigateur :

if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //IE
else var XhrObj = new XMLHttpRequest(); //Mozilla

On indique l'endroit d'affichage de la réponse :

content = document.getElementById("pseudo_check"); 	//zone d'affichage

On aura donc dans le code html de notre page, à droite du champ à vérifier

<span id="pseudo_check"></span>

Ce qui concrètement ressemblera à ça, notre champ de saisie, l'appel par un onblur à notre fonction javascript de contrôle dès que la personne quitte le champ, et la zone de la réponse du contrôle :

<input type="text" name="pseudo" value="" onblur="req_pseudo(this.value);"> <span id="pseudo_check"></span>

Voyons comment va se faire la requête vers le serveur,
on indique le nom de la page php qui fait le contrôle d'existence et la méthode (POST ou GET) :

  XhrObj.open("POST", "verification_pseudo.php");

L'envoi de la requête vers le serveur en passant le pseudo à contrôler :

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

La page php qui aura à charge de faire une requête dans la base de données afin de vérifier l'existence ou non du pseudo.
Si le pseudo est absent, elle retournera 'OK' sinon elle retournera 'FAIL'. On va tester ces réponses dans notre javascript

XhrObj.onreadystatechange = function()
{
  if (XhrObj.readyState == 4 & XhrObj.status == 200) {
    if (XhrObj.responseText == 'OK') {
      // ok nouveau pseudo
      content.innerHTML='<img src="images/accepter.png" alt=""/> Ok';
    } else {
      // erreur pseudo déjà existant
      content.innerHTML='<img src="images/refuser.png" alt=""/> Déjà pris';
    }
  }
}

La fonction au complet :

var bPseudo = false; // servira pour empêcher de poster le formulaire si vérification pseudo non ok
function req_pseudo(pseudo) {

  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
  else var XhrObj = new XMLHttpRequest(); //Mozilla

  content = document.getElementById("pseudo_check"); 	//zone d'affichage

  XhrObj.open("POST", "verif_pseudo.php");

  //Ok pour la page cible
  XhrObj.onreadystatechange = function()
  {
    if (XhrObj.readyState == 4 & XhrObj.status == 200) {
      if (XhrObj.responseText == 'OK') {
        // ok nouveau pseudo
        content.innerHTML='<img src="images/accepter.png" alt=""/> Ok';
      } else {
        // erreur pseudo déjà existant
        content.innerHTML='<img src="images/refuser.png" alt=""/> Déjà pris';
      }
    }
  }

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

}

La page verification_pseudo.php

<?php
$pseudo = htmlentities(addslashes($_POST['p']));
if (!empty($pseudo)) {
  $res = mysql_query("select * from users where pseudo='".$pseudo."'");
  echo (($row = mysql_fetch_array($res)) ? 'FAIL' : 'OK');
}
?>

Pour verrouiller l'envoi du formulaire tant que le pseudo n'est pas unique, il suffira de tester une variable bPseudo mise à jour lors du contrôle ajax.

function testChamps(f) {
  if (!bPseudo) return false;
  return true;
}

Pour les plus exigeants afin d'éviter qu'une personne ayant modifié son pseudo juste avant d'appuyer sur Valider passe au travers des contrôles :

function testChamps(f) {
  bPseudo = false; // on va revalider le champ
  req_pseudo(f.pseudo.value);
  if (!bPseudo) {
    alert('Erreur pseudo');
    return false;
  }
}

Cette fonction est bien entendu appelée lors de la demande soumission du formulaire.

<form method="post" onSubmit="return testChamps(this);">

Vous pouvez tester ce code sur cette page Test AJAX.

Vous savez maintenant comment vérifier les données d'un formulaire avec AJAX.