[AJAX] Vérification des mots de passe avant envoi en Ajax sur le serveur

Vérification des mots de passe avant envoi en Ajax sur le serveur

J'ai un formulaire contenant 2 champs (l'un pour le mot de passe, et l'autre pour la vérification dudit mot de passe).
L'objectif est que l'utilisateur saisisse son mot de passe et confirme la modification puis soumette le formulaire afin que l'injection SQL puisse se faire en Base.
Je pensais passer par de l'Ajax et du JSON pour faire tout cela car en fait lors du remplissage des champs password par l'utilisateur et la soumission du formulaire (donc côté client), il faut vérifier (par un script Ajax) que les données saisies sont corrects, et si elles le sont elles sont balançées de façon asynchrone sur le serveur pour l'injection SQL.

Est-ce la bonne méthode?

Merci d'avance,
Transact.

Je suis passé par JSON pour faire transiter les données entre PHP et Javascript. Par contre, je constate que les superglobales $_POST pour password et verif_password ne sont jamais postées.
Ceci entraine que json m'indique que les champs doivent être remplis.

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
 
<?php
	/** script permettant de modifier le mot de passe de l'utilisateur sans rafraichissement de la page **/
 
	header('Content-Type: text/html; charset=UTF-8');
	include_once 'inc_connexion.php';
	$conn = opendb_conn();
 
	// json permet de faire le pont entre Javascript et PHP
	$t = array(); // tableau permettant le traitement des données avec json
	$t["erreur"] = "Formulaire incorrect";	
 
	// on vérifie que le pseudo saisi par l'utlisateur est présent dans la table des membres
	$req = "select count(*) as nbr from membres where pseudo ='".$_POST['pseudo']."'";
	$stm = $conn->prepare($req);
	$stm->execute();
 
	// creation de la variable $result recuperant les lignes et les retournant EN TANT que tableau associatif
	$result = $stm->fetch(PDO::FETCH_ASSOC);
	//print_r($result); // pour le test	
 
	if($result['nbr'] == 0) { // si le pseudo n'est pas présent dans la table des membres alors
		$t["erreurPseudo"] = "Votre pseudo n'est pas référencée dans notre Base de données !";
	} else { 
		if(empty($_POST['password']) or empty($_POST['verif_password'])) {
			$t["erreurChamps"] = "Veuillez remplir tous les champs du formulaire !";
		} else if($_POST['password'] != $_POST['verif_password']) {
			$t["erreurPassword"] = "Les mots de passes ne correspondent pas !";
		} else {
			// on effectue le traitement de la mise à jour du mot de passe
			$sql = "update membres set password ='".$_POST['password']."' where pseudo ='".$_POST['pseudo']."'";	
			$stmt=$conn->prepare($sql);
			$stmt->execute();
			// on utilise notre tableau de données JSON à envoyer sur le serveur
			$t["erreur"] = "ok"; // utiliser lors de l'appel Ajax pour recevoir la réponse du serveur
			$t["retour"] = "Modification réussie de votre mot de passe !";
		}	
	} // fin if() ... else()
 
	// Ne pas oublier d'afficher l'encodage de la représentation json des valeurs envoyées sur le serveur
	header('Content-Type: application/json');
	echo json_encode($t); // la fonction json_encode() retourne la représentation json d'une valeur
 
?>

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
 
/** script permettant la modification du mot de passe suite à la perte/oubli de ce dernier **/
$(document).ready(function() {
	$("#reinitForm").submit(function(event) {
		event.preventDefault();	// empêcher le navigateur de soumettre lui même le formulaire
		// pendant la soumission on affiche le loader d'attente Ajax
		$("#loader").show();
 
		var url = $('form').attr('action');
		var pseudo = $('form').find("input[name=pseudo]").val();
		var password = $('form').find("input[name=password]").val();
		var verif_password = $('form').find("input[name=verif_password]").val();
 
		$.post(url, 
			{"pseudo":pseudo, "password":password, "verif_password":verif_password}, 
			// traitement des cas de la fonction de callback
			function(data) {
				$("#loader").hide();
				// si tout est ok dans le formulaire //
				if(data.erreur=="ok") {
					console.log(data.erreur); // pour le test
					$('#message').show("fast").text(data.retour);
					$('#message').fadeOut(6000);
					$("#message").fadeOut(6000);
				} // fin if(data.erreur="ok")
				/** le cas du pseudo **/
				if(data.erreurPseudo) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurPseudo);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);					
				} // fin if(data.erreurPseudo)
				/** le cas des champs vides **/
				if(data.erreurChamps) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurChamps);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);
				} // fin if(data.erreurChamps)
				/** le cas des mots de passe **/
				if(data.erreurPassword) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurPassword);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);
				} // fin if(data.erreurPassword)
			}, "json"); // fin $.post()
	}); // fin $("#reinitForm").submit()
	// on vide les champs du formulaire SAUF le bouton radio et celui de soumission
	$(':input','#reinitForm').not(':submit').val('');
}); // fin $(document)

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
        require_once 'inc_connexion.php';
        $conn=opendb_conn(); // on se connecte à la Base de données   
        print_r($_POST);        
?>
 
	<div class="boite">
			<div id="passOublieFormContainer" >
				<form name="form3" id="passOublieForm" action="includes/inc_modifierPassword.php" method="post">
					<fieldset>
						<span id="error"></span><br/>	
						<label for="login"> Pseudo : </label>
						<input type="text" name="pseudo" id="login" size="26" class="required" required="required" />
						<label for="password"> Nouveau mot de passe : </label>
						<input type="password" name="password" id="pass" size="26" class="required" minlength="8" required="required" />
						<label for="verif_password"> Confirmez mot de passe : </label>
						<input type="password" name="verif_password" id="verif_pass" size="26" class="equalTo" minlength="8" required="required" />
						<span id="loader" style="display:none;"><img src="img/loader.gif" alt="loader" /></span>
						<span id="message"></span><br />
						<input type="submit" name='submit' value="Modifier" />
					</fieldset>
				</form>						
			</div><!-- passOublieFormContainer -->
		</div><!-- boite -->

Pourquoi les variables $_POST['password'] et $_POST['verif_password'] ne sont pas postées?

Code:

<form name="form3" ...>

laisse supposer qu'il y a d'autres formulaires dans la page.
Dans ce cas, interroges-toi sur lequel sera traité par

Code:

$('form').find("input[name=pseudo]").val();

Notation qui est elle-même bien compliquée pour retrouver un champ dont tu connais l'id...

Enfin, au risque de me répéter, pourquoi n'envisagerais-tu pas d'apprendre jQuery (voire JavaScript) avant de l'utiliser ?

Bonjour Bovino,

Code:

<form name="form3" ...>

En fait cela signifie qu'il s'agit du 3ème formulaire crée dans mon projet ... il n'y a qu'un seul formulaire dans la page, mais bon j'ai enlevé le name.

Citation:

Notation qui est elle-même bien compliquée pour retrouver un champ dont tu connais l'id...

Jquery permets de passer par l'une ou l'autre ce ces méthodes ... j'ai utilisé la syntaxe suivante :
Code:

1 2 3 var password = $("#pass"); var verif_password = $("#verif_pass");
Mais cela ne change rien.

Malheureusement Bovino, je n'ai pas le temps d'apprendre jQuery de façon plus approfondie. J'ai le temps de lire ton livre en soirée et le week-end ... mais pas trop pour pas me faire "tirer les oreilles".:(
Transact.

1ère erreur décelée :
l'id du formulaire concerné dans le fichier Javascript n'était pas correct.

Code:

<form id="reinitForm" ...

au lieu de

Code:

<form id="passOublieForm" ...

mais les variables pseuod et verif_password ne sont alors plus soumissent?

[Résolu]
Il s'agissait encore une fois plus d'un problème de logique ... que de technique même si un "gap" en jQuery est nécessaire.

En fait pour que les variables PHP puissent être utilisable d'une page à une autre encore faut-il qu'elles soient postées.
ce qui n'était pas le cas vue la conception utilisée.