[AJAX] Validation formulaire sans alert()
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:
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:
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
