[TUTO] Vérifier la diponibilité du pseudo avec jQuery

Parfois lorsqu'on rempli un formulaire (inscription par exemple), il nous arrive de choisir un pseudo ou email déjà utilisé par quelqu'un d'autre (il existe dans la bdd). Et souvent on doit remplir le formulaire une autre fois, et imaginez si c’est un formulaire avec plein de champs à remplir, la galère. Il existe plusieurs solution pour éviter tout conflit, et parmi ces solutions on peut échanger les données avec le serveur sans changer de pages, en utilisant jQuery. La méthode est simple, vous pouvez d’ailleurs l’utiliser pour vérifier le pseudo, l’email ou n’importe quel champ.
Tout d’abord il nous faut une base de données, on utilisera celle qu’on a créé dans cet article : Autocomplétion avec jQuery et MySQL. On aura besoin d’une seule page php, où on traitera les données, et pour afficher le formulaire.
Username.php

 0 ){
// si le pseudo choisi est déjà utilisé par quelqu’un d’autre on affiche une erreur
header('HTTP/1.1 500 Nom d\'utilisateur déjà utilisé');
    exit();
}
else{
//si le pseudo est disponible, on affiche un message de réussite
echo"Nom d'utilisateur disponible";}
}

Le code jquery est inclus lui aussi dans la même page

$().ready(function() {
  $('#username').keyup(function(){// quand une touche du clavier est relâchée
  setTimeout(function() { // On laisse un peu de temps avant d'éxecuter la fonction (3s=3000ms)
       var username =$("#username").val();
 
 if(username == '' || username.length < 6){ // on vérefie si le formulaire n'est pas vide, et s'il contient au moins 6 caractères
  $('.erreur_user').html('Le nom d\'utilisateur contient moins de 6 caractères.');
   $(".erreur_user").show();
   return false;
 }
 else {
  jQuery.ajax({
   type: 'POST',
   url: 'username.php',
   data: 'username='+username,
   success: function(response){
   $(".erreur_user").replaceWith(response);
   
   },
   error:function (xhr, ajaxOptions, thrownError){
    $(".erreur_user").html(thrownError);
    $(".erreur_user").show();
    return false;
     }
 }); 
 }
}, 3000);

});
});

Pour un meilleur fonctionnement, vérifier que vous avez bien indiqué l’emplacement de votre fichier (url: 'username.php',), ainsi que l’id du champs dont vous voulez vérifier la disponibilité (#username).
Vous pouvez modifier le CSS selon votre choix, une seule page n'a pas besoin de css ( sauf pour les messages d'erreurs ou de réussites)

Afficher la suite