plugin Validation, champs obligatoires sous conditions

**st4nfield** · 15/12/2009, 14h39

Bonjour à tous !
Je bloque sur un problème de dépendance : voici mon une partie de mon formulaire :

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
 
<fieldset>
<legend>Choix de la course</legend>
<div class="rowElem">
<label for="course">Choix de la course<span>*</span> :</label>
 
<select id="course" name="course" class="required true">
	<option value="" selected="selected"></option>
<optgroup label="Rando VTT 100Km">
    <option value="1">Inscription seule 30€</option>
    <option value="2">Inscription AVEC TRANSPORT au sommet 42€</option>
</optgroup>
 
<optgroup label="Rando VTT 64Km">
    <option value="3">Inscription seule 15€</option>
</optgroup>
 
<optgroup label="Rando Tandem (Veuillez saisir le nom des 2 participants ci-dessous)">
    <option value="4">Inscription seule 30€ par personne</option>
    <option value="5">Inscription AVEC TRANSPORT au sommet 42€ par personne</option>
    <option value="6">Inscription seule (Départ de Seillans, AUCUN TRANSPORT !) 15€ par personne</option>
</optgroup>
</select>
</div>
</fieldset>
 
<fieldset>
<legend>Noms des équipiers (Course TANDEM uniquement !)</legend>
<div class="rowElem"><label for="equipier1">Nom de l'équipier #1 :</label><input type="text" name="equipier1" id="equipier1" /></div>
 
<div class="rowElem"><label for="equipier2">Nom de l'équipier #2 :</label><input type="text" name="equipier2" id="equipier2" /></div>
</fieldset>
 
<div class="rowElem">
<input type="submit" name="submit" id="submit" value="Valider l'inscription !" />
</div>

Je désire que les champs "equipier1" et "équipier2" soient obligatoires UNIQUEMENT si la personne a choisi les élément 4, 5 ou 6 dans la liste "select".

Voici mon code jquery pour l'instant :

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
 
<script type="text/javascript">
	$(function() {
		$('#naissance').datepicker({
			changeMonth: true,
			changeYear: true,
			yearRange:'-100:+0',
			minDate: '-100y',
			maxDate: '+0d',
		});
		// $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
		$.validator.messages.required = "Ce champ doit être renseigné"; 
		$.validator.messages.digits = "Ce champ doit contenir uniquement des chiffres";
		$.validator.messages.email = "Ce champ doit contenir une adresse email valide (rodolfe@free.fr)";
		$.validator.messages.date = "Ce champ doit contenir une date de la forme JJ/MM/AAAA";
		//$.validator.messages.minlength = "Au minimum";
		$.validator.messages.number = "Uniquement des chiffres";
		$.validator.messages.cp = "Ce champ doit contenir 5 chiffres";
		$.validator.messages.telephone = "Ce champ doit contenir 10 chiffres";
 
		$("#form").validate({
		  rules: {
			equipier1: {
			required: "#course:true"
			}
		  }, debug:true
		});
		$("#course").click(function() {
		$("#equipier1").valid();
 
		});
	});
</script>
 
Un énorme merci à qui peut me résoudre ça !

**danielhagnoul** · 16/12/2009, 00h15

Bonsoir.

Pour répondre à votre question, je viens de découvrir le plugin Validation et je crois avoir trouvé ! Exemple :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* TEST */
		label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#formID").validate();
 
			$("#course").change(function(){
				var n = $(this).val();
 
				if ((n > 3) && (n < 7)){
					$("#equipier1").rules("add", {
						required: true,
						minlength: 2,
						messages: {
							required: "Required input",
							minlength: jQuery.format("Please, at least {0} characters are necessary")
						}
					});
 
					$("#equipier2").rules("add", {
						required: true,
						minlength: 2,
						messages: {
							required: "Required input",
							minlength: jQuery.format("Please, at least {0} characters are necessary")
						}
					});
				}
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<form id="formID">
			<fieldset>
				<legend>Choix de la course</legend>
				<div class="rowElem">
					<label for="course">Choix de la course<span> * </span>:</label>
					<select id="course" name="course" class="required">
						<option value="" selected="selected"></option>
						<optgroup label="Rando VTT 100Km">
							<option value="1">Inscription seule 30€</option>
							<option value="2">Inscription AVEC TRANSPORT au sommet 42€</option>
						</optgroup>
						<optgroup label="Rando VTT 64Km">
							<option value="3">Inscription seule 15€</option>
						</optgroup>
						<optgroup label="Rando Tandem (Veuillez saisir le nom des 2 participants ci-dessous)">
							<option value="4">Inscription seule 30€ par personne</option>
							<option value="5">Inscription AVEC TRANSPORT au sommet 42€ par personne</option>
							<option value="6">Inscription seule (Départ de Seillans, AUCUN TRANSPORT !) 15€ par personne</option>
						</optgroup>
					</select>
				</div>
			</fieldset>
			<fieldset>
				<legend>Noms des équipiers (Course TANDEM uniquement !)</legend>
				<div class="rowElem">
					<label for="equipier1">Nom de l'équipier #1:</label>
					<input type="text" name="equipier1" id="equipier1" />
				</div>
				<div class="rowElem">
					<label for="equipier2">Nom de l'équipier #2 :</label>
					<input type="text" name="equipier2" id="equipier2" />
				</div>
			</fieldset>
			<div class="rowElem">
				<input type="submit" name="submit" id="submit" value="Valider l'inscription !" />
			</div>
		</form>
	</div>
</body>  
</html>

**st4nfield** · 16/12/2009, 09h08

ça marche, merci !!!

Pendant que j'y suis, dans ce même formulaire j'ai deux champ texte qui nécessitent des chiffres mais avec des longueurs différentes. Comment faire pour personnaliser le message ? (je galère dessus depuis un petit moment aussi...)

voici les champs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="rowElem">
<label for="code_postal">Code postal<span>*</span> :</label>
<input type="text" name="code_postal" id="code_postal" class="required digits" minlength="5" maxlength="5" value="" />
</div>
 
<div class="rowElem">
<label for="telephone">Téléphone<span>*</span> :</label>
<input type="text" name="telephone" id="telephone" class="required digits" minlength="10" maxlength="10" value="" />
</div>

**st4nfield** · 16/12/2009, 11h26

Résolu ! Pour info seulement :

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
50
51
52
53
 
		$("#form").validate({
    		rules: {
    			code_postal: {
    				required: true,
    				minlength: 5,
    				maxlength:5,
    				digits:true
    			},
    			telephone: {
    				required: true,
    				minlength: 10,
    				maxlength:10,
    				digits:true
    			}
    		},
    		messages: {
    			code_postal: {
    				digits: "Le code postal ne doit comporter que des chiffres",
    				minlength: "5 chiffres minimum",
    				maxlength: "5 chiffres maximum"
    			},
    			telephone: {
    				digits: "Le numéro de téléphone ne doit comporter que des chiffres",
    				minlength: "10 chiffres minimum",
    				maxlength: "10 chiffres maximum"
    			}
    		}
		});
 
		$("#course").change(function(){
				var n = $(this).val();
				if ((n > 3) && (n < 7)){
					$("#equipier1").rules("add", {
						required: true,
						minlength: 2,
						messages: {
							required: "Vous devez saisir le nom de l'équipier #1",
							minlength: jQuery.format("Veuillez saisir au minimum {0} caractères")
						}
					});
 
					$("#equipier2").rules("add", {
						required: true,
						minlength: 2,
						messages: {
							required: "Vous devez saisir le nom de l'équipier #2",
							minlength: jQuery.format("Veuillez saisir au minimum {0} caractères")
						}
					});
				}
			});
	});

plugin Validation, champs obligatoires sous conditions

jQuery

Discussions similaires

Partager

Partager