[AJAX] Validation formulaire sans alert()

**Fre3z69** · 15/12/2010, 23h29

Bonjours à tous

je cherche à savoir comment permettre à l'utilisateur d'être informé en temps réel des valeurs qu'il inscrit dans les champs.
En effet, j'ai besoin de valider des membres pas javascript, mais je ne souhaite pas les faire attendre pour leur dire ce qui ne vas pas.
Je cherche à leur écrire dans une DIV le message d'erreur.

Par exemple:

Si il clique sur l'email et ne met pas un email valide, lui dire

Format de l'email invalide.

J'ai un début de script qui permet de définir l'éxistance du pseudo choisi dans la BdD, et je souhaite faire cela pour tout le reste.

Je vous met le script JS pour la verif login, et le formulaire html.

Merci de votre aide

Le script:

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
77
78
79
80
81
82
83
84
85
function writediv(texte)
{
	document.getElementById('PseudoBox').innerHTML = texte;
}
function verifLogin(Login)
{
	if(Login != '')
	{
		if(Login.length<2)
		writediv('<span style="color:#cc0000;font-size:11px;font-weight:bold;">Trop court</span>');
		else if(Login.length>30)
		writediv('<span style="color:#cc0000font-size:11px;font-weight:bold;">Trop long</span>');
		else if(texte = file('verifLogin.php?Login='+escape(Login)))
		{
		if(texte == 1)
		writediv('<img src="ic_erreur.png" alt="Login pris" />');
		else if(texte == 2)
		writediv('<img src="ic_valide.png" alt="Login libre" />');
		else
		writediv(texte);
		}
	}
}
function file(fichier)
{
	if(window.XMLHttpRequest) // FIREFOX
	xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
	xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
	return(false);
	xhr_object.open("GET", fichier, false);
	xhr_object.send(null);
	if(xhr_object.readyState == 4) return(xhr_object.responseText);
	else return(false);
}
// *****
	function getXhr(){
                                var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
   xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
   try {
	                xhr = new ActiveXObject("Msxml2.XMLHTTP");
	            } catch (e) {
	                xhr = new ActiveXObject("Microsoft.XMLHTTP");
	            }
}
else { // XMLHttpRequest non supporté par le navigateur 
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
   xhr = false; 
} 
                                return xhr;
	}
 
	/**
	* Méthode qui sera appelée sur le click du bouton
	*/
	function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('Categories').innerHTML = leselect;
	}
}
 
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de la SousCategorie
sel = document.getElementById('SousCategorie');
cat = sel.options[sel.selectedIndex].value;
xhr.send("SousCategorie="+cat);
	}
//*****
 
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}

Le formulaire

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
	<form class="form" action="index.php?s=reg" method="post">
	<table style="width:600px;background-color:#ffffff;" cellspacing="0" cellpadding="10">
		<tr style="width:100%;">
			<td style="width:60%;"> </td>
			<td style="width:30%;"> </td>
			<td style="width:10%;"> </td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Nom :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Nom" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Prenom :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Prenom" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
 
			<td><span style="color:#000000;font-weight:bold;">Pseudo :</span><span style="color:#ff0000;">*</span></td>
			<td>
<!-- ICI LE CHAMP LOGIN -->
			<input name="Login" value="" size="20" type="text" onKeyUp="verifLogin(this.value)">
			</td>
			<td><div id="PseudoBox"></div></td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Mot de passe :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Password" value="" size="20" type="password">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Confirmer Mot de passe :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="VPassword" value="" size="20" type="password">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Email :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Email" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Vérifier Email :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="VEmail" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Téléphone :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Telephone" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td>
			<input name="Statut" value="Membre" type="hidden"/>
			<input name="Etat" value="Nonvalid" type="hidden"/>
			<input name="Date" value="<?php echo date('d-m-Y'); ?>" type="hidden"/>
			</td>
			<td><script>document.write('<input value="Inscription" name="Inscription" type="submit" />')</script>
			<noscript><span style="color:#ff0000;">! Activez JS !</span></noscript></td>
		</tr>
	</table>
	</form>

Cordialement

**Meloooo** · 16/12/2010, 13h39

Bonjour,
Je ne sais pas si c'est ca que tu recherches mais je viens de trouver un lien intéressant :
http://www.developpez.net/forums/d96...ps-formulaire/

**andry.aime** · 16/12/2010, 14h02

Bonsoir,

Tu as une fonction qui instancie un XMLHttpRequest, pourquoi ne pas l'utiliser dans la fonction file()?
Dans la fonction file, comme tu travailles en mode asynchrone, tu dois utiliser une fonction pour le onreadystatechange; je pense qu'il sera préférable de modifier un peu la structure de ton code en appelant la fonction verifLogin dans l'onreadystatechange de la fonction file plutôt que ce que tu fais.

A+.

**Fre3z69** · 16/12/2010, 15h27

En fait c'est pas forcément pour le login

c'est aussi pour l'email, le nom et prénom (si les deux existent, si le nom existe et pas le prénom on laisse)

et pour dire a l'utilisateur en temps réel que il manque un champ, que l'email n'a pas le format souhaité etc...

JE vous remet le formulaire, et ce que je souhaite en fait, c'est que tous les champs avec un * rouge doivent être vérifier grâce à ajax

Je suis désolé, je suis meilleur en php, mais une fois les scripts en php qu'il me reste à faire en urgence, je me lance dans les tutos javascript et ajax.

Le formulaire

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
 
	<form class="form" action="index.php?s=reg" method="post">
	<table style="width:600px;background-color:#ffffff;" cellspacing="0" cellpadding="10">
		<tr style="width:100%;">
			<td style="width:60%;"> </td>
			<td style="width:30%;"> </td>
			<td style="width:10%;"> </td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Nom :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Nom" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Prenom :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Prenom" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
 
			<td><span style="color:#000000;font-weight:bold;">Pseudo :</span><span style="color:#ff0000;">*</span></td>
			<td>
<!-- ICI LE CHAMP LOGIN -->
			<input name="Login" value="" size="20" type="text" onKeyUp="verifLogin(this.value)">
			</td>
			<td><div id="PseudoBox"></div></td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Mot de passe :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Password" value="" size="20" type="password">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Confirmer Mot de passe :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="VPassword" value="" size="20" type="password">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Email :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Email" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Vérifier Email :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="VEmail" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td><span style="color:#000000;font-weight:bold;">Téléphone :</span><span style="color:#ff0000;">*</span></td>
			<td colspan="2">
	<input name="Telephone" value="" size="20" type="text">
			</td>
		</tr>
		<tr>
			<td>
			<input name="Statut" value="Membre" type="hidden"/>
			<input name="Etat" value="Nonvalid" type="hidden"/>
			<input name="Date" value="<?php echo date('d-m-Y'); ?>" type="hidden"/>
			</td>
			<td><script>document.write('<input value="Inscription" name="Inscription" type="submit" />')</script>
			<noscript><span style="color:#ff0000;">! Activez JS !</span></noscript></td>
		</tr>
	</table>
	</form>

Merci de votre aide,e t de prendre du temps à regarder et à répondre à ce poste.

Cordialement

**andry.aime** · 16/12/2010, 17h43

En procédant comme je t'ai conseillé plus haut, tu peux mettre en paramètre le nom de champ, le nom de variable à envoyer et le div à mettre à jour après le retour de la requête AJAX dans la fonction file.

**Fre3z69** · 16/12/2010, 19h48

Merci à toi

Le hic c'est que je ne connais absolument rien en JavaScript et encore moins manipuler l'ajax.

peux tu me donner un exemple comme le pseudo ou l'email?? afin que je vois et apprenne un peux??

Merci de votre aide.

Cordialement

[AJAX] Validation formulaire sans alert()

AJAX

Vue hybride

Discussions similaires

Partager

Partager