Vérification de formulaire en AJAX ?

Petit nouveau ! | 6 Messages

19 déc. 2010, 18:12

Bonjour à tous.
Question bête, mais je n'arrive pas à trouver un bon tutoriel qui me permette de rendre dynamique mon formulaire d'inscription.

En fait, quand je le valide, ça affiche une page de validation avec les éventuelles erreurs et quand je clique sur précédent, pouf le formulaire est vide et il faut tout retapper.

Par conséquent, l'actualisation en temps réels avec AJAX me serait bien utile !
Seulement auriez-vous des bons tutoriels pour ça ?
De plus, comme je ne connais pas le Javascript, JQUERY serait utile, mais je ne vois pas comment faire !

Merci à tous.

Eléphant du PHP | 99 Messages

20 déc. 2010, 20:16

Bonsoir,

Regarde ceci : http://net.tutsplus.com/tutorials/javas ... ng-jquery/

Après à toi d'adapter comme tu le souhaites.

ViPHP
AB
ViPHP | 5818 Messages

20 déc. 2010, 20:38

En fait, quand je le valide, ça affiche une page de validation avec les éventuelles erreurs et quand je clique sur précédent, pouf le formulaire est vide et il faut tout retapper.
Si un bouton précédent est prévu pour la gestion du formulaire, c'est une erreur dans la programmation du formulaire et ce n'est pas en changeant de technique (ajax ou pas ajax) que cela changera quelque chose.

Maintenant si tu utilises le bouton précédent du navigateur, c'est tout à fait normal (et toujours pareil, cela ne dépend pas de la technologie utilisée).

Mammouth du PHP | 672 Messages

21 déc. 2010, 12:42

Bonjour à tous.
Question bête, mais je n'arrive pas à trouver un bon tutoriel qui me permette de rendre dynamique mon formulaire d'inscription.

En fait, quand je le valide, ça affiche une page de validation avec les éventuelles erreurs et quand je clique sur précédent, pouf le formulaire est vide et il faut tout retapper.

Par conséquent, l'actualisation en temps réels avec AJAX me serait bien utile !
Comme dit par AB, le bouton "Précédent" de ton navigateur va (presque) forcément effacer le contenu du formulaire...
AJaX n'y changera pas grand chose. De toute manière, il vaut mieux prévoir son site sans AJaX, et ensuite en rajouter (accessibilité, tout ça).
De plus, comme je ne connais pas le Javascript, JQUERY serait utile, mais je ne vois pas comment faire !
Mauvaise idée : utiliser des bibliothèques genre jQuery sans connaître le JS peut vite tourner au casse-tête (s'il y a un problème tu vas bidouiller sans visibilité).

Pour en rester au formulaire simple (sans AJaX), en fait il y a deux options :
1. Solution simple à mettre en place, mais "sale" (ça peut vite poser des problèmes de maintenance), mettre la vérification dans la page du formulaire.
L'avantage c'est que du coup tu récupères facilement le contenu.
Exemple :
<?php
/*
SI le formulaire a été envoyé, on teste la validité des champs
Ici, c'est juste un test pour voir si le champ est vide
mais on peut mettre ce qu'on veut.
Pareil, on peut utiliser un Array pour stocker les erreurs, puis gérer les erreurs en un coup
*/
$erreur = false;
if (isset($_POST['OK'])) {
	$erreur = empty($_POST['champ1']);
}
if ($erreur) {
	echo "<p>Renseigner le champ 1</p>";
}
?>
<form action="" method="POST">
<input name="champ1" value="<?php echo (empty($_POST['champ1'])) ? "": $_POST['champ1'];?>" />
<input type="submit" name="OK" />
</form>
2. Un script de traitement à part, plus complexe mais plus facile à maintenir (surtout si on a un gros site), et plus "académique".
sur le principe on a le même traitement, mais dans ce cas, si tout est OK le script redirige vers une page de confirmation (par exemple).
Et en cas d'erreur, le script redirige vers le formulaire. Restera à assurer un moyen de conserver le contenu des champs (sessions, cookies, ...)


Eventuellement, si tu veux "dynamiser" le formulaire tu peux utiliser de l'AJaX.
Principe : quand on sort d'un champ, on lance une fonction JS qui va appeler une fonction PHP de vérification.
Et suivant le code retour de cette fonction PHP, la fonction JS affiche un message "OK" ou "KO" à côté du champ...

fatta
Invité n'ayant pas de compte PHPfrance

02 mars 2011, 18:06

en javascript par un onblur() sur la zone à tester on appelle une fonction controlejs()

// cette fonction renvoie la zone en cours de test
function $(id)
{
return this.document.getElementById(id);
}

// cette fonction contrôle la zone
// on a une zone message pour réceptionner le message d'erreur qui est par défaut display none
// le bouton d'envoi envoiOK ( le submit ) est rendu invisible ou visible suivant le résultat du test
function controlejs()
{

var valeur=this.value; // valeur de la zone en test
if(valeur=="")
{
var info = this.id+" ?";
this.style.background='#FF9900';
this.focus(); // si vide on se positionne sur cette zone
$('message').innerHTML="erreur "+info;
$('message').style.display="inline";
$('envoiOK').style.display='none';
}
else
{
this.style.background='#0F3';
$('message').style.display="none";
$('envoiOK').style.display='inline';
}
}

ViPHP
AB
ViPHP | 5818 Messages

04 mars 2011, 02:37

A propos, je viens de donner un exemple de vérification de formulaire ("onblur" sur les champs et "onsubmit" sur le formulaire) en utilisant une requête ajax et jquery sur ce lien