Validation de formulaire

**dusk666** · 23/10/2010, 20h28

Bonjour, j'ai récupéré un script de la validation instantanée d'input d'un formulaire. J'ai 3 fichiers, une page php pour le Form, une page php pour la vérification coté serveur, et une page js pour la vérification coté client.
Je ne comprend pas pourquoi cela ne fonctionne pas chez moi. Pourriez-vous m'aider?

form.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
26
27
28
29
30
31
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/code.js" type="text/javascript" language="javascript"></script>
<title>Formulaire</title>
</head>
<body>
<form action="form.php" method="post" class="form">
        <dl>
        	<dt><label for="username">Pseudo:</label></dt>
            <dd><input type="text" name="username" id="username" size="32" maxlength="128" class="input_inscr" /><span id="msgbox" style="display:none"></span></dd>
        </dl>
        <dl>
        	<dt><label for="password">Mot de Passe:</label></dt>
            <dd><input type="password" name="password" id="password" size="32" maxlength="32" class="input_inscr" /></dd>
        </dl>
		<dl>
        	<dt><label for="cpassword">Confirmation Mot de Passe:</label></dt>
            <dd><input type="password" name="cpassword" id="cpassword" size="32" maxlength="32" class="input_inscr" /><span id="pmsgbox" style="display:none"></span></dd>
        </dl>
		<dl>
        	<dt><label for="email">Adresse Email:</label></dt>
            <dd><input type="text" name="email" id="email" size="32" maxlength="128" class="input_inscr" /><span id="emsgbox" style="display:none"></span></dd>
        </dl>
<input type="submit" name="inscription" id="inscription" value="Enregistrer" class="submit" />
</body>
</html>

validateform.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
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
68
69
70
 
include('config.php');
 
// A little function for email validation with regexp
function checkEmail($email) {
	// First, we check that there's one @ symbol, and that the lengths are right
	if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
		// Email invalid because wrong number of characters in one section, or wrong number of @ symbols.
		return false;
	}
	// Split it into sections to make life easier
	$email_array = explode("@", $email);
	$local_array = explode(".", $email_array[0]);
	for ($i = 0; $i < sizeof($local_array); $i++) {
		if (!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$", $local_array[$i])) {
			return false;
		}
	}
	if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) { // Check if domain is IP. If not, it should be valid domain name
		$domain_array = explode(".", $email_array[1]);
		if (sizeof($domain_array) < 2) {
			return false; // Not enough parts to domain
		}
		for ($i = 0; $i < sizeof($domain_array); $i++) {
			if (!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$", $domain_array[$i])) {
				return false;
			}
		}
	}
	return true;
}
 
// First section - user verification
// Get the check parameter
$check = $_REQUEST['check'];
if($check == 'username') { // If we must check for 'username' duplicates
	// Let's get the parameter sent by AJAX
	$username = trim($_REQUEST['user']); // also a little cleaning of the sent text
	// Next, we'll query the database for the username
	$query = mysql_query("SELECT pseudo FROM membres WHERE pseudo='$username'") or die("Erreur: ".mysql_error());
	// Now, let's test the result
	if(mysql_num_rows($query) == 0) { // if it doesn't returns a result
		echo "yes";
	}
	else { // if it does exist
		echo "no";
	}
	// Closing the database connection
	mysql_close();
}
if($check == 'email') { // If we must check for 'email' duplicates
	// Let's get the parameter sent by AJAX
	$email = trim($_REQUEST['emailAddress']); // also a little cleaning of the sent text
	// Next, we'll query the database for the email
	$query = mysql_query("SELECT email FROM membres WHERE email='$email'") or die("Erreur: ".mysql_error());
	// Now, let's test the result
	if(mysql_num_rows($query) == 0) { // if there's no duplicate mail
		if (checkEmail($email) == false) {
  			echo "invalid";
 		}
 		else {
 			echo "yes";
 		}
	}
	else { // if it does exist
		echo "no";
	}
	// Closing the database connection
	mysql_close();
}

Et la dernière, code.js

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
68
69
70
71
72
73
74
75
76
 
$(document).ready(function() {
	var checkUser = function (username) {
		//remove all the class add the messagebox classes and start fading
		$("#msgbox").removeClass().addClass('messagebox').text('Vérification...').fadeIn("slow");
		var username = $('#username').val();
		$.post(
			"validateForm.php",
			{check: 'username', user: username},
			function(data) {
				if(data=='no') { //if username not avaiable
				  	$("#msgbox").fadeTo(200,0.1,function() { //start fading the messagebox
						//add message and change the class of the box and start fading
			  			$(this).html('Pseudo utilisé!').addClass('messageboxerror').fadeTo(900,1);
					});		
          		}
		  		else {
		  			$("#msgbox").fadeTo(200,0.1,function() {  //start fading the messagebox
			  			//add message and change the class of the box and start fading
			 		 	$(this).html('Pseudo valide!').addClass('messageboxok').fadeTo(900,1);	
					});
		  		}
			}			
		)
	}
	var checkPass = function (password) {
		$("#pmsgbox").removeClass().addClass('messagebox').text('Vérification...').fadeIn("slow");
		var password = $('#password').val();
		var cpassword = $('#cpassword').val();
		if(password != cpassword) {
			$("#pmsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
				//add message and change the class of the box and start fading
				$(this).html('MDP Non identique!').addClass('messageboxerror').fadeTo(900,1);
			});
		}
		else {
			$("#pmsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
				//add message and change the class of the box and start fading
				$(this).html('OK!').addClass('messageboxok').fadeTo(900,1);
			});	
		}		
	}
	var checkEmail = function (email) {
		$("#emsgbox").removeClass().addClass('messagebox').text('Vérification...').fadeIn("slow");
		var email = $("#email").val();
		$.post(
			"validateForm.php",
			{check: 'email', emailAddress: email},
			function(data) {
				if(data=='no') { //if username not avaiable
				  	$("#emsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
						//add message and change the class of the box and start fading
			  			$(this).html('Email utilisé!').addClass('messageboxerror').fadeTo(900,1);
					});		
          		}
		  		else if(data=='invalid') { //if username not avaiable
				  	$("#emsgbox").fadeTo(200,0.1,function() { //start fading the messagebox
						//add message and change the class of the box and start fading
			  			$(this).html('Email invalide!').addClass('messageboxerror').fadeTo(900,1);
					});		
          		}
		  		else  {
		  			$("#emsgbox").fadeTo(200,0.1,function() {  //start fading the messagebox
			  			//add message and change the class of the box and start fading
			 		 	$(this).html('Email valide!').addClass('messageboxok').fadeTo(900,1);	
					});
		  		}
			}			
		)
 
 
	}
	$("#username").blur(checkUser);
	$("#cpassword").blur(checkPass);
	$("#email").blur(checkEmail);
});

Même si la valeur entré est existante dans la base de donnée, Pseudo et Email me renvoie toujours une valeur valide.
Merci d'avance pour votre aide précieuse.

**Code62** · 24/10/2010, 13h05

Salut,

Avec ce code:

Code :

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

1
2
3
4
5
6
7
				if(data=='no') { //if username not avaiable
          		    ...	
          		}
		  		else {
          		    ...
			 		 	$(this).html('Pseudo valide!').addClass('messageboxok').fadeTo(900,1);	
					});

tu vas afficher "pseudo valide" si la valeur de data est différente de "no", mais également si elle est différente de "yes"; par exemple si la requete SQL s'est mal executée et que tu as reçu le "die("Erreur: ".mysql_error())"

Es-tu certain de bien recevoir un "yes" ?

**dusk666** · 24/10/2010, 21h40

Salut à toi,

Non la page code.js n'arrive pas à récupérer de "yes" ni de "no" d'ailleurs et va directement au "else". J'ai essayé de le remplacer par un else if(data=='yes') mais le script reste coincé sur la vérification. Je débute depuis quelques jours dans le javascript et depuis hier avec jquery.

Du côté de ma requête SQL je ne pense pas avoir fait d'erreurs, j'ai créé ma table avec les champs correspondants dans ma requête. J'ai vérifié je ne sais plus combien de fois si je n'avais pas fait de fautes d'orthographes et maintenant je n'ai aucune idée d'où le problème pourrais venir...

**Code62** · 24/10/2010, 22h34

Hi,

Il faudrait alors vérifier ce que contient exactement "data", pour localiser le problème.
Si tu utilises l'extension Firebug pour Firefox (ce que je te conseilles vivement), tu peux ajouter ceci:

Code :

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

console.debug(data);

juste après ton

Code :

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

function(data) {

dans code.js
(si tu n'utilises pas et ne veux pas utiliser l'extension, tu peux tenter un simple "alert(data);", mais ça sera moins clair)

Le contenu exact de data devrait permettre de trouver l'origine du problème

**dusk666** · 24/10/2010, 23h47

Donc j'ai installer Firebug et lancé la console:
Lorsque je rentre un pseudo se trouvant dans la base de donnée data me retourne: "no" et lorsque le pseudo est libre il me retourne "yes". la page validateForm fonctionne donc...

**bobobaskettt72** · 30/05/2011, 11h40

j'ai une formulaire et sur son onsubmit="validerForm(theForm)";

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
<script>
function validerForm(theForm)
{  
 
    if (theForm.date_naissance.value != "")
   {    
 
       verifierDateNaissance();
   }	  
   else
   {
       alert("Veuillez saisir une date de naissance.\nMerci");
       theForm.date_naissance.focus();
       return (false);
   }
 
}
 
function verifierDateNaissance()
{
    var dateNaissance    =document.getElementsByName("date_naissance").value;
   var reg = new regExp('^([0-9]){2}/([0-9]){2}/([0-9]){4}$');
   if(reg.test(dateNaissance))
  {   
 
      alert("Veuillez saisir une date de naissance de la forme jj/mm/aaaa.\nMerci");
      return(true);
  }
}
</script>

quand je rentre n'importe quoi dans le champ date_naissance rien ne se passe lors du submit ! pouvez vous m'aider

Validation de formulaire

jQuery

Discussions similaires

Partager

Partager