JeuWeb - Crée ton jeu par navigateur
[Résolu][Ajax] Formulaire d'inscription - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][Ajax] Formulaire d'inscription (/showthread.php?tid=2480)



[Résolu][Ajax] Formulaire d'inscription - Reaven - 25-02-2008

Slt,

Grâce à la grande aide que m'a apporté Sephi-Chan, je me suis mit à commencer l'Ajax. J'ai étudié les bases sur un très bon site contenant un tuto concernant Ajax (j'ai oublié le nom dsl ^^). Donc voilà après avoir terminé j'ai téléchargé un code-source concernant un formulaire en Ajax que j'ai lu afin de tout comprendre et que j'ai essayé de recoder (sans regarder. C'est pas du copier-coller que j'ai fait c'est plutot un TP perso). Les tests s'avèrent concluant bien que quelques petits erreurs de bases pas très grâce mais assez pour faire planter le code (ah je vois qu'il y en a qui me comprenne ^^) que Sephi-Chan m'a aidé à corriger. Maintenant que c'est petite erreur sont corrigé l'inscription fonctionne sauf un petit détail concernant l'affichage de réponse de conditions utilisant la BDD.

Voici mes 3 pages:

inscription.php:

Code PHP :
<?php 
<!--Ce code contient le formulaire nécessaire à l'inscription. Dans cette page est également inclue la page ajax.js(voir <head></head>)-->
<html>
<head>
<title>Formulaire d'
inscription</title>
<
meta http-equiv="Content/Type" content="text/html; charset=utf-8"/>
<
link rel="stylesheet" type="text/css" href="style.css"/>
<
script type="text/javascript" src="ajax.js"></script>
</
head>
<
body>
<
h3>Formulaire d'inscription en Ajax:</h3>
<center>
<fieldset>
<legend>S'
inscrire</legend>

<
form method="post" onsubmit="verif(this.login.value,this.passe.value,this.confirmation.value,this.email.value,this.histoire.value);return false" action="">
<
div id="erreur"></div>
<
label>Login:*</label> <input type="text" name="login" /><br>
<
label>Passe:**</label> <input type="password" name="passe" /><br>
<
label>Confirmation:</label> <input type="password" name="confirmation"/><br>
<
label>Email:</label> <input type="text" name="email"/><br><br>

<
label>Histoire de votre personnage:</label>***<br>
<
textarea name="histoire" rows="10" cols="30"></textarea><br><br>
<
input type="submit" value="S'inscrire"/>
</
form>
<
div>* : 5 caractères minimum.</div>
<
div>** : 4 caractères minimum.</div>
<
div>***: 100 caractères minimum.</div>
</
fieldset>
</
center>
</
body>
</
html>

ajax.js:
Code PHP :
<?php 
/*Cette page sert à vérifier et à afficher les erreurs sourvenues lors de l'inscription via la page verification_inscription.php*/
function verif(login,passe,confirmation,email,histoire)
{
var
xhr_object;

if (
window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else if (
window.ActiveXObject) xhr_object = new ActiveXObject('Microsoft.XMLHTTP');

xhr_object.open('POST',"verification_formulaire.php",true);

xhr_object.onreadystatechange= function()
{
if(
xhr_object.readyState == 4 && xhr_object.status==200)
{
if(
document.getElementById)
{
if(
xhr_object.responseText == 'Inscription réussie')
{
document.getElementById('erreur').innerHTML= xhr_object.responseText;
}
else
{
document.getElementById('erreur').innerHTML=xhr_object.responseText;
}
}
}
}

xhr_object.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr_object.send('login='+login+'&passe='+passe+'&confirmation='+confirmation+'&email='+email+'&histoire='+histoire);
}

verification.php:
Code PHP :
<?php 
<!--Cette page sert à vérifier les informations entrées dans le formulaire et à afficher les erreurs survenues.-->
<?
php
require('config.php');

mysql_connect($hote,$utilisateur,$mdp);
mysql_select_db($data_base);

$erreur= array();

if(empty(
$_POST['login']) || empty($_POST['passe']) || empty($_POST['confirmation']) || empty($_POST['email']) || empty($_POST['histoire']))
{
$erreur[]= utf8_encode('Il reste des champs a complèter.');
}
else
{
$retour= mysql_query("SELECT * FROM membres");
$donnees= mysql_fetch_array($retour);

if(!
preg_match('#^[a-zA-Z0-9]{5,}$#', $_POST['login'])){
$erreur[]= utf8_encode('Votre login est trop court ou contient des caractères non-autorisés.');
}
else if(
$_POST['login'] == $donnees['login']){
$erreur[]= utf8_encode('Ce login existe déjà.');
}
else if(!
preg_match('#^[a-zA-Z0-9]{4,}$#', $_POST['passe'])){
$erreur[]= utf8_encode('Votre passe est trop court ou contient des caractères non-autorisés.');
}
else if(
$_POST['confirmation'] != $_POST['passe']){
$erreur[]= utf8_encode('Veuillez à ce que la confirmation de votre passe soit correcte.');
}
else if(!
preg_match('#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#', $_POST['email'])){
$erreur[]= utf8_encode('Votre email contient des caractères qu\'il ne devrait pas comporter.');
}
else if(
$_POST['email'] == $donnees['email']){
$erreur[]= utf8_encode('Cette email appartient à un autre membre.');
}
else if(
strlen($_POST['histoire'])<2){
$erreur[]= utf8_encode('Votre histoire est trop courte.');
}
}

if(
count($erreur)==0)
{
$login= $_POST['login'];
$passe= $_POST['passe'];
$confirmation= $_POST['confirmation'];
$email= $_POST['email'];
$histoire= nl2br($_POST['histoire']);

mysql_query("INSERT INTO membres VALUES('','$login','$passe','$email','$histoire','Joueur')");
echo
utf8_encode("<p style='color: green'>Inscription réussie</p>");
}
else
{
echo
'<p class="erreur">';
for(
$i=0; $i<count($erreur); $i++)
{
echo
' -'.$erreur[$i].'<br>';
}
echo
'</p>';
}
mysql_close();
?>

Mon problème survient au niveau de l'affichage des erreurs concernant les conditions qui vérifient la disponibilité du login et du mail. Ces conditions ne son pas prises en compte et donc si le champ login contien un login déjà existant dans la bdd, l'erreur ne s'affiche pas. De même pour l'email. Ces deux conditions sont passées et même si l'email et le login entré sont existant, les infos sont enregistrées dans la BDD et le message indiquant que l'inscription est réussi s'affiche.

Pouvez-vous m'aider svp ?

Merci
Dark Angels


RE: Formulaire d'inscription en Ajax - barst - 25-02-2008

Ton problème vient que ton fetch ne te remonte que la première ligne de ta requête.
Déjà te requête te remonte tous les lignes de ta table membre, c'est beaucoup trop

Code PHP :
<?php 
$retour
= mysql_query("SELECT * FROM membres WHERE login='".$_POST['login']."'" );
$logins= mysql_fetch_array($retour);
$retour= mysql_query("SELECT * FROM membres WHERE email='".$_POST['email']."'" );
$emails= mysql_fetch_array($retour);

et plus loin pour le contrôle, tu n'a plus que ça à faire

Code PHP :
<?php 
...
else if(
$_POST['login'] == $logins['login']){
$erreur[]= utf8_encode('Ce login existe déjà.');
}
...
else if(
$_POST['email'] == $emails['email']){
$erreur[]= utf8_encode('Cette email appartient à un autre membre.');
}
...

Une autre manière plus élégante serait d'utiliser un COUNT() dans la requête MySQL mais je te laisse chercher cette fonction et son explication/utilisation par toi-même


RE: Formulaire d'inscription en Ajax - Reaven - 25-02-2008

OK merci beaucoup ça marche.

J'en ai juste profiter pour "fusionner" tes 2 requete en mettant:

Code PHP :
<?php 
$retour
= mysql_query("SELECT * FROM membres WHERE login='".$_POST['login']."' AND email = '".$_POST['email']."'");
$donnees= mysql_fetch_array($retour);

Ca m'evite de modifier mes 2 variable $donnees[] plus bas.
Eh ou comme tout codeur je suis fénéant ^^.

Merci encore
Dark Angels


RE: [Resolu] Formulaire d'inscription en Ajax - Spoutnik - 25-02-2008

Excuse moi de poser en HS mais est-ce que tu pourrais donner le site dont tu parles ? (s'il n'est pas déjà donné sur le forum)

Merci par avance, et bonne soirée. Spoutnik.


RE: [Resolu] Formulaire d'inscription en Ajax - Reaven - 25-02-2008

Heu oui je veut bien je viens de retrouver l'adresse:

http://robloche.free.fr/javascript/tuto_xhr/tuto_xhr.html


RE: [Resolu] Formulaire d'inscription en Ajax - Spoutnik - 26-02-2008

Merci beaucoup :-)

Bonne nuit, Spoutnik.