Jquery validation engine + ajax

Version imprimable

28/05/2012, 22h08
guitz

Jquery validation engine + ajax

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
29/05/2012, 00h38
mesken

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.
29/05/2012, 17h08
guitz

Salut Mesken et merci pour ta réponse.

Oui ça m'intéresse, merci

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:

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:

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

30/05/2012, 11h55
guitz

Merci à toi :ccool:

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 :cry:

M'enfin merci encore

Bonsoir,

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

...

Code:

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:

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:

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:

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:

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:

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:

xhr.onreadystatechange = function() {

prend un certain tps alors que

Code:

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

31/05/2012, 00h20
mesken

Là où tu fais ceci

Code:

"alertText":"pseudo deja pris"

Affiche plutôt le contenu de ta DIV, tu peux faire ceci

Code:

"alertText": $('DivErreur').text();

En passant que représente "check_pseudo": dans ton code ?
31/05/2012, 10h41
guitz

Citation:

Envoyé par mesken

Là où tu fais ceci

Code:

"alertText":"pseudo deja pris"

Affiche plutôt le contenu de ta DIV, tu peux faire ceci

Code:

"alertText": $('DivErreur').text();

En passant que représente "check_pseudo": dans ton code ?

Bonjour mon ami, merci pour ta réponse mais pourquoi veux tu que j'affiche le contenu du div ? alertText c'est le message d'alerte qui de toute façon s'affichera dans ce div à la suite éventuellement des autre messages (d'autres regle comme length, required pour champ requis etc...) de ce meme input.

check_pseudo c'est une nouvelle "rule" (règle) qui permet de vérifier si le pseudo rentré est déjà utilisé ou non.

Bonne journée