Vérification du formulaire faite, et après ?

Version imprimable

21/02/2010, 10h01
RootsRagga

Vérification du formulaire faite, et après ?

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:

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

Pourquoi l'action de charger index.php ne fonctionne pas apres la verif Jquery ?
21/02/2010, 10h05
javatwister

aucune idée, sans le script...

;)

voici quelques extraits:

le form :

Code:

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:

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?

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

Code:

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,

22/02/2010, 10h15
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:

<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.