CE BLOG N'EST PLUS MIS A JOUR !
POUR DES INFORMATIONS RECENTES VEUILLEZ VOUS RENDRE ICI
Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Ajax : Vérification instantanée des champs d'un formulaire avec jQuery

Posté par : Neg le : 2008-05-02 10:41:50



Lors d'une inscription sur un site via un formulaire classique, avec demande de pseudo, mail, nom, prénom... Il peut être intéressant pour l'utilisateur de faire une vérification des champs, avant l'envoi du formulaire (au clic sur un bouton "submit"), afin d'indiquer à la personne si un pseudo identique existe déjà par exemple.

Voici ce que nous allons obtenir, le pseudo "numa" existe déjà.

Nous allons voir ici, comment mettre en place ce type de contrôle en Ajax. Pour ce faciliter les choses, et puisque depuis que j'ai commencé avec jQuery je n'en démords plus, nous utiliserons cette librairie. On inclus donc le framework, par la ligne habituelle dans le "head" de la page :


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

Premièrement mettons en place notre formulaire, en html classique avec : label, champ à remplir suivi d'un span "info" qui informera l'utilisateur sur la validité de ses champs.


<div class="encadre">
<form action="page_qui_traitera_le_formulaire.php" method="post">
<label> Pseudo : </label><input type="text" name="pseudo" /><span class="info"></span><br />
<label> Mail : </label><input type="text" name="mail" /><span class="info"></span><br />
<label>&nbsp;</label><input type="submit" name="inscription" /></span class="info"></span>
</form>
</div>

C'est ok pour le formulaire, attaquons nous aux javascript (jQuery) qui devra s'activer lorsqu'on rentre dans un champ (focus), et quand on en sort (blur).
Comme d'habitude avec jQuery, les fonctions et évènements se placent dans la fonction "ready" qui et prête à se lancer dés que le document est chargé. Code à placé sous notre premier appel de la librairie jQuery :

<script>
$(document).ready(function(){
</script>
});

Tout d'abord créons la fonction qui videra le contenu du span "info" qui suit le champ cliqué. En effet, nous ne vérifions pas réellement le champ instantanément mais seulement une fois qu'il est rempli (passage à l'autre champ, est donc perte du focus.) Quant on est sur ce champ, nous effaçons donc les informations précédemment rentrées.


$("input").focus(function(){
var info_form=$(this).next(".info");
info_form.empty();
});

Passons maintenant à notre fonction principale. Son rôle : Quant un champ perd le focus, elle récupère sa valeur pour le vérifier. On récupère aussi son nom pour savoir quelles actions effectuées (différentes selon les champs.) Si le champs est vide, on indique qu'il est obligatoire, sinon nous allons vérifier en ajax si un pseudo identique n'existe pas déjà dans la base :


$("input").blur(function(){
var name=($(this).attr("name"));
var value=($(this).attr("value"));
var info_form=$(this).next(".info");
if(value==undefined)
{
info_form.append("Obligatoire");
}
else if(name=="pseudo")
{
//fonction décrite plus bas
}
else if(name=="mail")
{
//à vous de jouer pour verifier le mail de la même manière
}
});

On s'attaque au principal avec la fonction ajax() de jQuery, qui va envoyer notre pseudo (stocké dans la variable "value") à un script php "verif_pseudo.php", qui nous renverra "0" si le pseudo est ok, et "1" si il existe déjà. Nous remplissons ensuite le span "info" de l'information adéquate :


$.ajax({
type: "GET",
url: "./verif_pseudo.php?pseudo="+value,
success:function(data){
if(data==1)
{
info_form.append("Un compte avec le même pseudo existe déja");
}
else
{
info_form.append("Valide");
}
}
});

Je vous propose maintenant, le code du fichier "verif_pseudo.php" qui n'est pas compliqué, on récupère la valeur passé en paramètre, on se connecte à la base de donnée, on effectue la requête vérifiant si le pseudo existe, et selon le cas on renvoi "1" ou "0"


<?php
if(isset($_GET["pseudo"]))
{
$pseudo=$_GET["pseudo"];
include("./connect_bdd.php");
$req_pseudo_exist="SELECT membre_id FROM membres WHERE membre_pseudo='".$pseudo."'";
$pseudo_exist=mysql_query($req_pseudo_exist);
if(mysql_num_rows($pseudo_exist)>0)
{
echo "1";
}
else
{
echo "0";
}
mysql_close();
}
else
{
echo "non non !";
}
?>

Un peu de css pour arranger le tout :


.encadre
{
border: solid 3px #925E96;
padding:10px;
margin-left:auto;
margin-right:auto;
width:600px;
}
label
{
padding-right:5px;
text-align:right;
float:left;
width: 100px;
}
.rouge
{
color:#FF0000;
}
.vert
{
color:#00bb00;
}

Et voila le travail !!

lien direct : http://numa-bord.com/old/leblog/chezneg-leblog.php?id_art=126&titre=Ajax--:-Vérification-instantanée-des-champs-d'un-formulaire-avec-jQuery
tags : Informatique (68), ajax (7), tutoriel (13), css (12), php (21), jQuery (12), javascript (9),


J'aime, 25 personnes aiment çaCommentaire(s)(44)

1) luisa le : 2008-08-04 19:47:37

Il existe deja une librairie qui s'appelle validate. Il est plus facile a employer.

2) nico le : 2008-09-15 14:40:21

Bonjour, j'ai besoin d'utiliser ce mode de vérification donc cela m'est très utile mais le problème c'est que j'ai toujours "valide" comme réponse alors que la connexion à la base de données et bonne je ne comprend pas si vous pouvez m'aider...merci

3) leknoppix le : 2008-11-19 22:49:35 leknoppix.fr

Super tuto, je vais essayer.

4) Shazdo le : 2009-02-02 18:23:06

Bon, j'ai tout bien copié collé, et essayant de ne changer que ce qui est nécessaire, et ça ne fonctionne pas.

J'imagine que la ligne:
<script>
$(document).ready(function(){
</script>
});

est en fait:
<script>
$(document).ready(function(){
});
</script>

Mais quand bien même, je n'arrive à aucun résultat, base connecté et fonctionnelle.

Quelqu'un pourrait m'aider?

5) neg le : 2009-02-02 18:56:22

Merci de me faire remonter l'erreur du <script> mal placé.

sinon as tu vérifié ton code par rapport au code source de la page de démo ? Si pas de différences ça vient sans doute de la page verif_pseudo.php, quand tu l'apelle en lui donnant les parrametres à la main, est-ce que le résultat correspond bien ?

6) anto le : 2009-02-04 18:25:50 jai pas

Bonjour,
je cherche une solution ajax pour :

dans un formulaire :

champ societe : (select prerempli via base de donnee comportant id et nom societe)

champ adresse (text input)
champ cp (text input)
champ ville (text input)

solution recherchée :
lorsque je choisi une societe dans le select cela m'importe automatiquement les 3 champs adresse, cp et ville

c'est possible en ajax ?
merci de votre reponse

7) neg le : 2009-02-05 11:44:45 www.chezneg.fr/leblog/chezneg-leblog.php

Pas la peine de poster 3 fois. Oui c'est possible en cherchant un peu avec les tutos du site ou sur le net tu devrait trouver comment faire.

8) TDG le : 2009-02-06 15:30:23

Ca donne vraiment pas envie de lire avec toutes les fautes d'orthographe! De plus le code aurait pu être formaté pour avoir plus facile à comprendre. Et on te dit qu'il y a une faute dans ton code et tu n'en fais même pas la correction ! o_O
Mal expliqué et tu confonds en plus le verbe ETRE avec ET. Attention "est" n'est pas pareil que "et"... C'est sympa de partager le code mais faut apprendre à écrire correctement quand on met en ligne.

9) Neg le : 2009-02-06 17:14:56 www.chezneg.fr/leblog/chezneg-leblog.php

"De plus le code aurait pu être formaté pour avoir plus facile à comprendre" et ça donne des leçons....

10) TDG le : 2009-02-09 09:49:14

Ah on efface les commentaires qui ne plaisent pas? Ainsi tu es sûr d'avoir le dernier mot. C'est bien.

Pour info, ma phrase n'était pas correctement formulée, j'avoue. Mais ceci doit être dû à une trop longue lecture de ton article. Ca embrouille pas mal.

Je ne reviendrai pas sur ton site, je ne vais pas m'acharner sur toi, j'ai d'autres choses à faire. Il s'avère simplement qu'il était encore dans mes "favoris". Libre à toi de laisser ou de supprimer mon commentaire.

Bonne journée...

11) neg le : 2009-02-09 15:51:30

J'ai supprimé aucun commentaires... les articles ont l'air de vraiment te fatigué.

12) GrM le : 2009-03-07 17:29:09 http://www.g-rm.fr

En fait, le script marche mieu en testant la valeur du champ avec "" et non undefined. en tout cas chez moi.

enjoy

13) clubi le : 2009-03-08 20:48:24

merci pour ce très bon tuto,
j'aimerais savoir comment faire pour qu'il valide une fois le nom et le mail remplis,
je m'explique, Si le nom et le mail existe dans la base message "déjà existant" si vous avez la solution je suis preneur :-)

14) Etoila Matelas le : 2009-07-21 16:43:16 www.biosense.fr

Bon petit tuto bien pratique pour faire une requête en ajax, sans prise de tête. Bien vu !


Merci pour ce script, je l'utilise sur le site d'annonces et ça fonctionne à merveille !

16) Kilkikou le : 2009-08-28 10:51:13 www.trance-djs.com

Ce script permet bien de vérifier les champs.
Mais le formulaire est quand même envoyé, même si les données sont erronnées...

Comment peut-on remédier à ce problème?

17) neg le : 2009-08-28 13:36:47 www.chezneg.fr/leblog/chezneg-leblog.php

De toute façon, il faut toujours faire une deuxième vérification (php) une fois que le formulaire à été posté. Car sans cette deuxième vérification, si le javascript n'est pas activé tout passe.

18) epsylon le : 2009-10-11 00:14:09

Bonsoir, j'ai un petit problème avec le script. Il me marque constamment valide, aussi bien quand je ne mets rien que quand je mets un pseudo qui existe déjà. Serait-il possible de copier le code ajax en un seul bloc svp car je n'y connais absolument rien dans ce domaine, merci.

19) epsylon le : 2009-10-11 10:18:24

Bonjour, c'est encore moi. Ca s'est un peu amélioré depuis que j'ai remplacé le undefined par "" mais il me met toujours valide quand je rentre un pseudo qui existe déjà dans la base. De plus, j'aimerais souligné un autre bug: lorsqu'on tape juste un espace dans le champs du pseudo, il mets quand même valide alors que le champs est vide.

20) neg le : 2009-10-11 13:12:07 www.chezneg.fr/leblog/chezneg-leblog.php

Pour avoir tout le code javascript en un seul bloc il suffit de regarder le code source de la page de démo.

21) Reivax46 le : 2010-01-18 14:22:26 www.reivaxweb.fr

Le script marque constamment valide car il ne faut pas écrire if(data=="1") mais plutôt if(data==1).

22) neg le : 2010-01-19 11:30:41 www.chezneg.fr/leblog/chezneg-leblog.php

oui, merci reivax46, je corrige ça.

23) Rod le : 2010-02-19 15:27:42

Il y a une erreur pour le dernier span :
</span class="info"></span>
il y a un slash au début en trop.

24) clement le : 2010-03-25 00:21:41

bonjour , tout fonctionne tres bien .

je voudrais savoir s'il etait possible a partir de ce code de vérifier l'envoi du formulaire sans rechargement de page evidemment avec l'indication des champs incorrects (en les affichant en rouge par exemple ? )

merci d'avance .

25) neg le : 2010-03-25 10:36:18 www.chezneg.fr/leblog/chezneg-leblog.php

Bonjour clement, c'est exactement le même principe, sauf qu'a la place d'un bouton "submit" il faut mettre un <span> par exemple avec un identifiant, et au clic sur cette élément appelé un fichier javascript, qui effectue l'envoie du formulaire ou qui retourne les erreurs si il y'en à.

26) abdleke le : 2010-05-30 11:41:11

bonjour
je veux savoir si on peut utiliser le java au lieu de php

27) neg le : 2010-05-30 12:14:11 www.chezneg.fr/leblog/chezneg-leblog.php

Surement mais je ne connais rien en développement java.

28) simontemplar37 le : 2011-01-20 18:10:40 michaelloaec.comze.com

Super script excellent (dommage que certains comme TDG viennent polluer ce site)
Encore merci continuez comme ça

29) Lesbienne le : 2011-02-11 17:15:27 http://www.betolerant.fr

Merci pour le script il est simple à utiliser et facile à installer !

30) Hades le : 2011-02-23 10:06:49

Bonjour, j'ai un petit souci, et oui, je n'arrive pas à utiliser le script, après réglage et correction du script ( le <?php absent et le </script> mal placé ). Lors du test, mysql me renvoie sans arrêt : Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\wam..

Comprend pô o_O
Personnellement étudiant en informatique, j'ai montré le souci à quelques amies informaticien, et ça doit être tellement flagrant qu'on ne trouve pas :s

D'avance merci si vous avez une idée!

31) hades le : 2011-02-23 10:59:18

Je précise que la ligne en question est celle ou il y à mysql_num_row :

$result = mysql_query("SELECT dep FROM localite WHERE pseudo='".$_GET["pseudo"]."'");
if(mysql_num_rows($result)>=1){
echo "1";
}
else{
echo "2";
}

32) Hades le : 2011-02-23 11:15:25

Dsl pour le flood, à chaque rafraîchissement (F5) de ma page, il renvoie le message xD

33) Hades le : 2011-02-23 13:16:47

Pb résolu ... merci quand même ! :)

34) Eria le : 2011-05-05 12:53:41 sebastien.planard.free.fr

Bonjour,
Merci pour ce tuto, il me sera sûrement très utile !
Quelques petites remarques tout de même (dans un souci d'amélioration) :
- l'orthographe, trop de fautes ça nuit à la lisibilité quand même... :/
- un peu de couleurs sur les parties codes ça m'aurait aidé.
- éventuellement des copies d'écrans du rendu sous navigateur au fur et à mesure, pour que le tout passe mieux.

35) LiLi le : 2011-06-03 11:26:11

Bonjour, j'adore ce tuto, mais je n'arrive pas à le faire fonctionner... J'ai modifier les variables car je n'utilises pas les mêmes noms que le tuto, mais à part sa rien ne s'affiche... Y a t il une solution ? =s

36) Christophe le : 2011-06-16 10:51:11 www.cbcreations.fr

Bonjour,
merci pour ce tuto qui ouvre des portes pour le développement.


Salut !
Trés sympa ce tuto.
JQuery ca rend l'ajax tout de suite plus facile.
;)
Encore merci.

38) Christophe le : 2011-09-10 18:30:30 www.cbcreations.fr

C'est clair, et du côté du web mobile, il y a aussi JQuery Mobile qui permet de travailler avec l'ergonomie mobile, quand on teste, on dirait une application native !

39) OBI/Alpha le : 2011-09-13 13:38:16 www.globuline.com

A voir

40) Christophe le : 2011-11-09 16:04:50 www.cbcreations.fr

Ah c'est tout vu.

Je suis sur une problématique épineuse de JQM : la récupération par un script php des variables d'url passées en javascript (sachant qu'on ne recharge jamais la page dans une vraie application).

Comme cette astuce fait précisément la liaison entre les 2, peut-être est-ce la solution à mon problème ... suspense. Enfin, c'est un tout petit poil hors sujet là.

41) Mons54 le : 2011-11-29 04:28:27 forum.sitefm.fr

Très bon script! Malgré que je l'ai modifié ça marche très bien!

Par contre, tu sais comment bloquer l'envoie du formulaire ? Juste pour le nombre de pseudo, je me sert que de cette fonction...

42) Christophe le : 2011-12-08 12:13:39 www.cbcreations.fr

Et voilà, problème résolu, merci $.ajax !

43) Rencontre lesbienne gratuite le : 2012-03-14 00:20:48 www.tongay.com

Merci pour ce script simple, efficace et fonctionnel.

Je cherchais depuis un petit temps quelque chose de similaire !

Bizzz :-)

44) kek le : 2013-09-27 20:22:11

Super tuto, et ca marche, merci bien.

es-ce possible de faire le traitement sur la meme page ? (inserer "verif_pseudo" dans la page du formulaire ?)

j'essaye mais le script php ne recupere pas la variable get, du coup, il affiche valide pour tout le monde


Les derniers articles :
Les derniers articles de mon nouveau blog développeur
Nouvelle version de mon portfolio
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file

propulsé par Neg