plugin Validation, champs obligatoires sous conditions

Version imprimable

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

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

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 !

Bonsoir.

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

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

ç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:

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>

Résolu ! Pour info seulement :

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
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")
						}
					});
				}
			});
	});