[Résolu]Formulaire jQuery (Merci à GroquikMLV)

Bonjour à tous,

Je viens vers vous une nouvelles fois concernant le site de mon groupe de musique.

J'ai réalisé une page avec un formulaire.
Pour le moment tout ce passe bien, je récupère bien les informations dans la base de données, l'email est bien envoyé.
En revanche, lorsque l'utilisateur n'inscrit pas toutes les données, ou si la réponse à la question "anti-spam" n'est pas bonne, mon formulaire ce recharge vide, sans aucunes indications.

J'aurais souhaité garder les informations, et faire cela en PHP, j'ai vu qu'il y avait des solutions en JQUERY, ou javascript, mais je débute et j'ai un peu de mal à tout comprendre.

Vous trouverez ci joint, le code de ma page en question, et ici le lien direct : http://www.alexbass.net23.net/telechargement.php
le code de ma page

D'avance merci à tous.
Modifié par Alexbass (27 Jun 2013 - 16:07)

Salut,

C'est simple. Voici un exemple de ligne de ton formulaire :

<input type="text" name="unChamp" value="<?php if(!empty($_POST['unChamp'])) echo $_POST['unChamp']?>">

Bonjour,
Tu as plein d'exemples sur le net en cherchant un peu, mais grosso modo, voilà les étapes importantes à faire:
1) intégrer le fichier js de la librairie jquery à ta page, ainsi que le fichier jquery.validate.js
2) dans ton formulaire, tu paramètres les champs sur lesquels tu veux qu'il y ait un contrôle par exemple :

<input id="cemail" type="email" name="email" required />

signifie que tu as un champ de type "email" (donc il va surement vérifier que ça comporte une chaine de caractère de type xxxxxx@xxx.xx), et qu'il est requis (donc que tu auras un message d'erreur si il est vide).

Autre exemple:

<input id="cname" name="name" minlength="2" type="text" required />

Signifie que ton champ sera de type texte, qu'il doit comporter au minimum 2 lettres, et qu'il est obligatoire ("required").
3) ne pas oublier de mettre un id à ta balise <form>
4) appeler la fonction de validation (à mettre entre 2 balises <script></script>) qui se déclenchera à la fin du chargement de ta page :

$().ready(function() {	
	$("#idDeTonFormulaire").validate();
}

5) Éventuellement ajouter du css pour customiser le tout comme tu le souhaites

Regarde par exemple le code source de cette page (ctrl+U sous firefox/chrome):
http://jquery.bassistance.de/validate/demo/

EDIT: la solution de niuxe fonctionne également parfaitement, et à l'avantage d'être plus rapide si tu n'as pas envie de te lancer dans la librairie JQuery
Modifié par GroquikMLV (26 Jun 2013 - 15:59)

Oui c'est bien cela, en gros tu mets tes fichiers jquery.js et jquery.validate.js dans un dossier sur ton serveur, puis tu les intègre dans ta page un peu à la façon d'une feuille css:

<script src="./chemin/vers/dossier/jquery.js"></script>
<script src="./chemin/vers/dossier/jquery.validate.js"></script>

Ok, bon je vais tenter de faire quelque chose de bien alors, en jquery.

Je vais modifier le titre du sujet : Fomulaire PHP devient "Formulaire jQuery" pour que je puisse revenir poser des questions.

T'es comme la redbull GroquikMLV, tu me donnes des ailes

Je viens de télécharger une archive sur le site http://jqueryvalidation.org/
Si j'ai bien compris, je dois prendre dans l'archive les éléments suivants :
- le fichier "jquery.validate.js" qui se trouve dans le dossier "dist"
- le fichier "jquery.js" qui se trouve dans le dossier "lib"

Après, si je les met sur le serveur dans un dossier nommé "jquery", j'appellerais les fichiers de cette manière :

<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.validate.js"></script>

Merci de ta confirmation.

Bon, j'ai fait quelque chose, mais je suis bloqué.
Enfin avant d'être bloqué, j'ai essayé de tester, mais sans résultat.
Voici le code que j'ai fait, et là ou je suis bloqué.

<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.validate.js"></script>
<script>
	$().ready(function() {
		$("#formulaire").validate({
			rules: {
				nom: "required",
				prenom: "required",
				mail: "required",
				mail2: {
				        required: true,
					equalTo: "#mail"
				},
				commentaire: {
					maxlength: 200
				},
				verif: {
					required: true,
					equalTo: "chaud" <- LA JE SUIS BLOQUER
				},
			},
			messages: {
				nom: "Merci d'indiquer votre nom",
				prenom: "Merci d'indiquer votre prénom",
				mail: "Merci d'indiquer votre email",
				mail2: {
					required: "Merci de confirmer votre email",
					equalTo: "Les adresses email ne sont pas identiques"
				},
				commentaire: {
					maxlength: "Votre commentaire ne peut depasser 200 carcatères",
				}
			});
	});
</script>		

Là où je suis bloqué, en faite je ne sais pas vraiment si ça va fonctionner.
En plus, il faut que l'utilisateur puisse entrer "chaud", "Chaud" ou "CHAUD", ou même "ChAuD" enfin bref, que se soit insensible à la casse.
Merci d'avance pour votre aide.

Ah c'est bien, je vois que tu avances

Pour résoudre ton problème, tu dois créer ta propre règle de vérification, que tu appelleras par la suite:

$().ready(function() {
        //ici tu définis une règle nommée "maReglePerso dans laquelle tu renvoie vrai ou faux selon si le résultat une fois transformé en minuscules (toLowerCase) vaut "chaud" (car par exemple, ChAuD une fois transformé en minuscules vaudra toujours "chaud")
        jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
        },
	$("#formulaire").validate({
		rules: {
			nom: "required",
			prenom: "required",
			mail: "required",
			mail2: {
			        required: true,
				equalTo: "#mail"
			},
			commentaire: {
				maxlength: 200
			},
			verif: {
				required: true,
				equalTo: "maReglePerso" //ici tu mets le nom de la regle que tu as definis au dessus
			},
		},

Modifié par GroquikMLV (26 Jun 2013 - 23:30)

Bonjour GroquikMLV.

Je viens de mettre ta solution dans mon code, mais je crois qu'il me manque un crochet de fermeture. Je ne sais pas où le mettre.

<script>
$().ready(function() {
	jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
	},
		$("#formulaire").validate({
			rules: {
				nom: "required",
				prenom: "required",
				mail: "required",
				mail2: {
					required: true,
					equalTo: "#mail"
				},
				commentaire: {
					maxlength: 200
				},
				verif: {
					required: true,
					equalTo: "maReglePerso"			
		                },
			},
			messages: {
				nom: "Merci d'indiquer votre nom",
				prenom: "Merci d'indiquer votre prénom",
				mail: "Merci d'indiquer votre email",
				mail2: {
					required: "Merci de confirmer votre email",
					equalTo: "Les adresses email ne sont pas identiques"
				},
				commentaire: {
					maxlength: "Votre commentaire ne peut depasser 200 carcatères",
				}
			}
		);
});
</script>	

C'est ma faute, j'ai oublié de copier/coller une ligne de code... J'étais un peu fatigué quand je l'ai fait Essaie ça:

<script>
$().ready(function() {
	jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
	},
        "ton message d'erreur");
		$("#formulaire").validate({
                  //le reste du code

EDIT: j'arrive pas à faire des indentations correctes, donc c'est à l'arrache ^^
Modifié par GroquikMLV (27 Jun 2013 - 09:49)

J'ai toujours un manque. Sur Notepad ++, il ne trouve pas de fermeture pour les crochets du début.

<script>
	$().ready(function() { <- CE CROCHET LA
		jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
		},
        	"Mauvaise réponse");
	$("#formulaire").validate({
		rules: {
			nom: "required",
			prenom: "required",
			mail: "required",
			mail2: {
				required: true,
				equalTo: "#mail"
			},
			commentaire: {
				maxlength: 200
			},
			verif: {
				required: true,
				equalTo: "maReglePerso"
			},
		},
		messages: {
			nom: "Merci d'indiquer votre nom",
			prenom: "Merci d'indiquer votre prénom",
			mail: "Merci d'indiquer votre email",
			mail2: {
				required: "Merci de confirmer votre email",
				equalTo: "Les adresses email ne sont pas identiques"
			},
			commentaire: {
				maxlength: "Votre commentaire ne peut depasser 200 carcatères",
			}
		}
	);
	});
</script>		

En effet il y a un problème d'accolades. Essaie ça:

<script>
	$().ready(function() {
		jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
		},"Mauvaise réponse");
		$("#formulaire").validate({
			rules: {
				nom: "required",
				prenom: "required",
				mail: "required",
				mail2: {
					required: true,
					equalTo: "#mail"
				},
				commentaire: {
					maxlength: 200
				},
				verif: {
					required: true,
					equalTo: "maReglePerso"
				},
			},
			messages: {
				nom: "Merci d'indiquer votre nom",
				prenom: "Merci d'indiquer votre prénom",
				mail: "Merci d'indiquer votre email",
				mail2: {
					required: "Merci de confirmer votre email",
					equalTo: "Les adresses email ne sont pas identiques"
				},
				commentaire: {
					maxlength: "Votre commentaire ne peut depasser 200 carcatères",
				}
			}
		});                    <--JE PENSE QUE LE PB VENAIT D'ICI
	});
</script>

Ok, ça à l'air d'être bon au niveau des crochets.
Par contre, je n'ai aucun message qui s'affiche si j'ai des erreurs sur mon formulaire.
http://www.alexbass.net23.net/telechargement2.php

Là j'avoue que c'est un peu flou pour moi.

Chez moi ça fonctionne, par contre je n'ai pas les messages que tu as défini... Par exemple, j'ai "Veuillez compléter ce champ" à la place de "Merci d'indiquer votre nom".

J'avoue que là je ne comprends pas trop... Il doit surement y avoir un message prédéfini quelque part, et tes messages perso ne sont pas pris en compte Essaie de définir tes messages de la même manière que tu l'as fait pour commentaire (en spécifiant les cas). Par exemple:

			messages: {
				nom: {required: "Merci d'indiquer votre nom"},

Les messages "Veuillez compléter ce champ", sont ceux affichés par défaut par le navigateur.
Parce que dans mon "form", j'ai indiqué "required".
Ces messages apparaissaient avant que je commence à intégrer du jQuery.
Je test de changer mes messages comme tu me le suggère.

Dans l'exemple : http://jquery.bassistance.de/validate/demo/
on peu voir que pour le "signupForm", les inputs ne sont pas marqués "required".

<form class="cmxform" id="signupForm" method="get" action="">
	<fieldset>
		<legend>Validating a complete form</legend>
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" type="text" />

Comme on peut également voir, qu'il n'y a pas de

value="<?php if(!empty($_POST['prenom'])) echo $_POST['prenom']?>"

dans les inputs.

J'édite dès que j'ai changé les messages...
... je viens de tester, et ça ne change rien.
Voici le code changé :

<script>
	$().ready(function() {
		jQuery.validator.addMethod("maReglePerso", function(value) {
                return value.toLowerCase() == "chaud";  
		},"Mauvaise réponse");
			$("#formulaire").validate({
				rules: {
					nom: "required",
					prenom: "required",
					mail: "required",
					mail2: {
						required: true,
						equalTo: "#mail"
					},
					commentaire: {
						maxlength: 200
					},
					verif: {
						required: true,
						equalTo: "maReglePerso"
					},
				},
				messages: {
					nom: {
						required: "Merci d'indiquer votre nom",
					},
					prenom: {
						required: "Merci d'indiquer votre prénom",
					},
					mail: {
						required: "Merci d'indiquer votre email",
					},
					mail2: {
						required: "Merci de confirmer votre email",
						equalTo: "Les adresses email ne sont pas identiques"
					},
					commentaire: {
						maxlength: "Votre commentaire ne peut depasser 200 carcatères",
					},
				}		
			});                 
	});
</script>

J'ai aussi enlevé les "required" dans mon code "form", sans succès.
Modifié par Alexbass (27 Jun 2013 - 11:30)

As-tu pensé à ajouter du code css pour les erreurs? Par exemple, sur la page http://jquery.bassistance.de/validate/demo/ tu peux voir qu'il y a une règle css:

#signupForm label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
}

Je pense (je ne suis pas allé voir tout le code de la librairie) que lorsqu'il y a une erreur, il rajoute une balise <label class="error">Le message d'erreur</label>
Je ne suis pas sur que ça marchera, mais ça ne coute rien d'essayer

Je viens de rajouter du code CSS, sans résultats.

<style type="text/css">
	#formulaire { width: 500px; }
	#formulaire label { width: 250px; }
	#formulaire label.error, #formulaire input.submit { margin-left: 253px; }
</style>

Est ce que ca ne pourrait pas venir de la méthode post à la place de get ?
ou, ça vient du fait que moi je valide mon formulaire avec un bouton et pas eux.
Modifié par Alexbass (27 Jun 2013 - 11:50)

Je viens de parcourir ton site avec firebug, et il s'avère que JQuery n'est pas chargé...
Essaie:

<script language="javascript" type="text/javascript" src="./jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./jquery/jquery.validate.js"></script>

à la place de ton appel normal, en début de document. Et essaie aussi de remplacer

$().ready(function () {

par

$(document).ready(function () {

Modifié par GroquikMLV (27 Jun 2013 - 12:06)

Je viens de faire les modifs sans succès.