Jquery validation engine + ajax

**guitz** · 28/05/2012, 23h08

Bonjour,

J'ai réussi à me servir du validation engine pour tous mes champs de saisie du formulaire ormis pour une requete asynchrone vers ma bdd mysql (ajax) pour vérifier si un pseudo rentré n'est pas déjà utilisé.

Pourriez vous me donner une piste svp pour savoir comment intégrer ajax au Jquery validation engine ?

Merci

**mesken** · 29/05/2012, 01h38

Bonsoir guitz, je ne maîtrise pas bien Jquery validation engine, je ne l'ai pas encore utilisé, je gère généralement mes validations moi même. Si tu veux je te donne une astuce comment tester qu'un pseudo existe dans la BD avec Ajax, PHP et jQuery, indépendamment de Jquery validation engine, mais s'il faut obligatoirement combiner Ajax et Jquery validation engine, là je ne peux rien.

**guitz** · 29/05/2012, 18h08

Salut Mesken et merci pour ta réponse.

Oui ça m'intéresse, merci

**mesken** · 29/05/2012, 19h08

OK

Puisqu'il s'agit de vérifier si un pseudo existe dans la BD, la tu dois avoir 2 fichier pseudo.html et pseudo.php qui communique avec la BD et renvoi le résultat dans un objet JSON que tu testeras et renverras le message à l'utilisateur.

1) pseudo.html
n'oublie pas bien sûr d'inclure tes bibliothèques jQuery et autres...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
 
    $(document).ready(function () {
 
	  $('#testerPseudo').click(function(){
 
//On récupère le pseudo saisi par l'utilisateur
	       var pseudo=$('#pseudo').val();	
 
//Passage de la valeur au du paramètre qu'on récupèrera dans php
	        var data ={pseudo: pseudo}; 
 
//Appel du serveur (fichier php)
	         $.post('pseudo.php', data, function(valeurRetourne) {
 
		     if(valeurRetourne=="echec") {
 
			  $('DivErreur').html("Ce pseudo existe déjà");
                       }
		       else {
			   $('DivErreur').html("Enregistrement effectué avec succès");
		       }
 
	         });
 
 
	});
 
 
      });
 
 
    </script>
 
</head>
 
<input type="text" id="pseudo" /><br />
 
<input type="button" id="testerPseudo" value="Tester Pseudo" />
<div id="DivErreur"></div>
 
<body>
</body>
</html>

1) pseudo.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
 
	//Tu appelle ton code de connexion a la BD ici
           //On récupère la valeur envoyée par le fichier html
		$pseudo=(isset($_POST['pseudo'])) ? $_POST['pseudo'] : Null;
 
		//On la recherche dans la BD
		$query=" SELECT * FROM table_pseudo WHERE pseudo='$pseudo'";
		$resultat=mysql_query($query);
		$nombreTrouve=mysql_num_rows($resultat);
 
		if($nombreTrouve) {
 
			$messageErreur="echec";
		}
		else{
 
			//Si tout est parfait tu écrit ton code d'enregistrement dans la BD ici
			$messageErreur="succes";
 
		}
 
		echo $messageErreur;
 
?>

Hope this will help

**guitz** · 30/05/2012, 12h55

Merci à toi

La difficulté ça va être pour moi d'intégré le message j'avascript ( alert('le pseudo existe déja choisissez en un autre svp') ) dans les div d'alerte du validation engine, à mon avis je vais pas y arriver et le résultat fera pas très pro

M'enfin merci encore

**guitz** · 30/05/2012, 21h20

Bonsoir,

Bon je pensais avoir réussi mais c'est pas tout à fait le cas.

...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script type="text/javascript">
	<!-- 
 
	function getXMLHttpRequest() {
		var xhr = null;
 
		if (window.XMLHttpRequest || window.ActiveXObject) {
			if (window.ActiveXObject) {
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} else {
				xhr = new XMLHttpRequest(); 
			}
		} else {
			alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
			return null;
		}
 
		return xhr;
	}
 
 
	function request(callback) {
		var xhr = getXMLHttpRequest();
 
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
				callback(xhr.responseText);
			}
		};
 
		var pseudo = encodeURIComponent(document.getElementById("pseudo").value);
 
		xhr.open("GET", "verif_pseudo.php?pseudo=" + pseudo, true);
		xhr.send(null);
	}
 
	function readData(sData) {
		alert(sData);
	}
	//-->
 
</script>
 
 
<script src="formValidator/js/jquery.js" type="text/javascript"></script>	
<script src="formValidator/js/jquery.validationEngine-fr.js" type="text/javascript"></script>  
<script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
 
</head>
 
<body>
 
 
<form id="formID" class="formular" method="post" action="register.php">
 
 
			<table>
				<tr><td class="gauche"><font class="star">*</font> Pseudo</td><td><input class="validate[required,custom[noSpecialCaracters],length[<?php echo MIN_CARACT_PSEUDO.','.MAX_CARACT_PSEUDO; ?>], check_pseudo] text-input" name="pseudo" type="text" id="pseudo" /></td></tr>
</table>
 
<p><input class="submit" type="submit" value="Valider" /></p>
 
	</form>

alors avant d'include les fichiers .js de jquery il y a le code ajax dessus, on appelle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

request(readData)

qui renvoie 0 ou 1 selon que le pseudo dans le champ est présent dans la base de données ou non.

Dans "jquery.validationEngine.js" j'ai rajouté la règle "check_pseudo" que voici (tout en bas):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
jQuery.fn.validationEngine = function(settings) {
	if($.validationEngineLanguage){					// IS THERE A LANGUAGE LOCALISATION ?
		allRules = $.validationEngineLanguage.allRules
	}else{
		allRules = {"required":{    			  // Add your regex rules here, you can take telephone as an example
							"regex":"none",
							"alertText":"* This field is required",
							"alertTextCheckboxMultiple":"* Please select an option",
							"alertTextCheckboxe":"* This checkbox is required"},
						"length":{
							"regex":"none",
							"alertText":"*Between ",
							"alertText2":" and ",
							"alertText3": " characters allowed"},
						"minCheckbox":{
							"regex":"none",
							"alertText":"* Checks allowed Exceeded"},	
						"confirm":{
							"regex":"none",
							"alertText":"* Your field is not matching"},		
						"telephone":{
							"regex":"/^[0-9\-\(\)\ ]+$/",
							"alertText":"* Invalid phone number"},	
						"email":{
							"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
							"alertText":"* Invalid email address"},	
						"date":{
                             "regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
                             "alertText":"<strong>* Invalid date, must be in YYYY-MM-DD format"},
						"onlyNumber":{
							"regex":"/^[0-9\ ]+$/",
							"alertText":"* Numbers only"},	
						"noSpecialCaracters":{
							"regex":"/^[0-9a-zA-Z]+$/",
							"alertText":"* No special caracters allowed"},	
						"onlyLetter":{
							"regex":"/^[a-zA-Z\ \']+$/",
							"alertText":"* Letters only"},
						"check_pseudo":{
							"regex":"none",
							"alertText":"pseudo deja pris"
						}
					}	
	}

Rien de bien compliqué jusqu'à présent et je continue en apportant ces modifs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var validateCall = function(caller,rules) {	// EXECUTE VALIDATION REQUIRED BY THE USER FOR THIS FIELD
		var promptText =""	
		var prompt = $(caller).attr("id");
		var caller = caller;
		var callerName = $(caller).attr("name");
		isError = false;
		callerType = $(caller).attr("type");
 
		for (i=0; i<rules.length;i++){
			switch (rules[i]){
			case "optional": 
				if(!$(caller).val()){
					closePrompt(caller)
					return isError
				}
			break;
			case "required": 
				_required(caller,rules);
			break;
			case "custom": 
				 _customRegex(caller,rules,i);
			break;
			case "length": 
				 _length(caller,rules,i);
			break;
			case "minCheckbox": 
				 _minCheckbox(caller,rules,i);
			break;
			case "confirm": 
				 _confirm(caller,rules,i);
			break;
			case "check_pseudo": 
				/* setTimeout("checkPseudo(caller,rules,i)", 3000); */
				checkPseudo(caller,rules,i);
			break;
			default :;
			};
		};
 
...
 
...

Je viens de rajouter ci-dessus le cas ou on vérifie un pseudo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
case "check_pseudo": 
				/* setTimeout("checkPseudo(caller,rules,i)", 3000); */
				checkPseudo(caller,rules,i);
			break;

Les autres règles sont "champ requis", "que des chiffres", "adresse email" valide etc...
Ces règles font partie du tableau rules.

Et enfin j'ai rajouté la fonction appellée suivante (checkPseudo) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function _length(caller,rules,position){    // VALIDATE LENGTH
 
			startLength = eval(rules[position+1])
			endLength = eval(rules[position+2])
			feildLength = $(caller).attr('value').length
 
			if(feildLength<startLength || feildLength>endLength){
				isError = true
				promptText += settings.allrules["length"].alertText+startLength+settings.allrules["length"].alertText2+endLength+settings.allrules["length"].alertText3+"<br />"
			}
		}
 
		function checkPseudo(caller,rules,position){    // Check the pseudo
				request(readData);
				isError = true;
				promptText += settings.allrules["check_pseudo"].alertText;
		}

J'ai mis la ft _lenght pour que vous puissiez vous faire une idée du fonctionnement de ce genre de fonctions.
Si isError = true alors le prompText va venir se placer dans un div qui pointe vers le champ en question et le formulaire ne sera pas validé.

Donc ce que j'ai fait fonctionne , le texte "pseudo deja pris" se retrouve bien dans le div. Mais la maintenant évidemment je veux que ce texte s'affiche avec le div de mise en garde si et seulement si la requete ajax renvoie 1.
Mais le pb c'est que request(readData); renvoie undefined car

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.onreadystatechange = function() {

prend un certain tps alors que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function checkPseudo()

elle n'attend pas la garce.
J'ai tout essayé avec des setTimeout(); ça ne fonctionne pas

J'ai beaucoup de temps dessus, pourriez-vous svp me mettre sur la piste ?

Merci