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.