Discussion :

[RootsRagga]

Bonjour,

Je viens de r�aliser une page web pour un plombier qui lance un nouveau concept :

lien supprim�

Sur cette page la v�rification (qui n'est pas en place) se fait en php.

Rien d'extraordinaire. Oui mais voil�,

J'ai voulu installer une v�rification pr�alable avec JQuery.

Qui fonctionne tr�s bien

lien supprim�

Lorsque les champs requis sont bien rempli, j'ai une alerte qui me dit que tout va bien, et c'est tout...

La page ne charge pas.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<form method="POST" class="cmxform" id="form1" action="index.php">

Pourquoi l'action de charger index.php ne fonctionne pas apres la verif Jquery ?

[javatwister]

aucune id�e, sans le script...

[RootsRagga]

voici quelques extraits:

le form :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="main">
	<form method="POST" class="cmxform" id="form1" action="index.php">
		<fieldset>
			<legend>Demande d'information</legend>
 
			<div class="error">		</div>
 
			<p>
				<label for="nom">Nom *</label>
				<input type="text" name="nom" id="nom" title="Entrez votre nom " class="{required:true,minlength:1}" />
			</p>
...
</form>

LE CSS :

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
form.cmxform {margin-top:10px;	font-size: 1.0em;	color: #333333;}
form.cmxform legend {	padding-left: 0;}
form.cmxform legend, form.cmxform label {	color: #333333;}
form.cmxform fieldset {
	border: none;
	border-top: 1px solid #C9DCA6;
	background: url(images/cmxform-fieldset.gif) left bottom repeat-x;
	background-color: #F8FDEF;
}
form.cmxform fieldset fieldset {background: none;}
form.cmxform fieldset p, form.cmxform fieldset fieldset {	padding: 5px 10px 0px;	background: url(images/cmxform-divider.gif) left bottom repeat-x;}
form.cmxform label.error, label.error {	color: red;	font-style: italic;}
div.error { display: none; }
input {	border: 1px solid black; }
input.checkbox { border: none; }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
form.cmxform .gray * { color: gray; }
 
form.cmxform fieldset {	margin-bottom: 10px;}
form.cmxform legend {	color:#174879;font-size:21px;padding: 10px 2px;	font-weight: bold;	_margin: 0 -7px; /* IE Win */}
form.cmxform label {display: inline-block;	line-height: 1.8;	vertical-align: top;cursor: hand;}
form.cmxform fieldset p {list-style: none;padding: 5px 5px 5px 20px;	margin: 0 ;}
form.cmxform fieldset fieldset {border: none;margin: 3px 0 0;}
form.cmxform fieldset fieldset legend {	padding: 0 0 5px;font-weight: normal;}
form.cmxform fieldset fieldset label {display: block;width: auto;}
form.cmxform label { width: 100px; } 
form.cmxform fieldset fieldset label { margin-left: 103px; } /* Width plus 3 (html space) */
form.cmxform label.error {	margin-left: 103px;	width: 120px;}
form.cmxform input.submit {	margin-left: 103px;}
form.cmxform  table {	margin-left: 20px;}
 
 
/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */

il y a aussi les fichiers Jquery (jquery.validate.js...)visibles � partir du code source de la page : lien supprim�

Est-ce suffisant Javatwister?

[RootsRagga]

Il ya a aussi �a avant </head>:

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
<style type="text/css">
		.cmxform fieldset p.error label { color: red; }
		div.container {
			background-color: #eee;
			border: 1px solid red;
			margin: 5px;
			padding: 5px;
		}
		div.container ol li {
			list-style-type: disc;
			margin-left: 20px;
		}
		div.container { display: none }
		.container label.error {
			display: inline;
		}
		form.cmxform { width: 30em; }
		form.cmxform label.error {
			display: block;
			margin-left: 1em;
			width: auto;
		}
	</style>
	<script type="text/javascript">
		$.validator.setDefaults({
			submitHandler: function() {
				alert("Votre demande d'information a été envoyée avec succès!!");
			}
		});
 
		$().ready(function() {
			$("#form1").validate({
				errorLabelContainer: $("#form1 div.error")
			});
 
			var container = $('div.container');
			// validation du formumaire par soumission
			var validator = $("#form2").validate({
				errorContainer: container,
				errorLabelContainer: $("ol", container),
				wrapper: 'li',
				meta: "validate"
			});
 
			$(".cancel").click(function() {
				validator.resetForm();
			});
		});
	</script>

A bient�t,

[RootsRagga]

Bonjour,

Je laisse tomber le contr�le du formulaire avec Jquery (imp�ratif de temps).
Mon formulaire est donc contr�l� en php.

Dommage une v�rification cot� client am�ne vraiment un plus, d'autant que Jquery propose des scripts vraiment sympa.

Mais je n'ai pas su enclencher l'envoi du formulaire apr�s (ou plut�t avant) le message de succ�s de Jquery.

Normalement, lorsque l'on clique sur Envoyer du formulaire, il charge depuis le serveur en fonction de sa configuration.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<form method="post" action="traitement-contact.php">

Mais lorsque je mets les attributs Jquery sur les input du formulaire (qui permettent les contr�les de saisie), lorsque je clique sur envoyer, je vois dans la barre d'�tat que le formulaire ne charge pas.

Je laisse tomb� pour l'instant, je mets le tag r�solu et je supprime les liens que j'avais mis pour ne pas retrouver ce post dans le r�sultat Google sur certaines requ�tes.

Merci quand m�me, et � plus tard.