jquery et validation de formulaire

Version imprimable

Bonsoir,
J'utilise le plugin JQuery pour vérifier un formulaire.
J'aimerai faire des conditionnels sur les champs requis nom et adresse.
Je souhaite lever une erreur uniquement si aucun de ces deux champs est sélectionné.

Mon code actuel est visible ici :
http://helptuto.fr/test/application/application5.php

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
<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>formulaire</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css">
        <script src="../js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
function valider(){
	valid = true;
	if($("#ref").val() == ""){
		$("#ref").css("border-color","#FF0000");
		$("#ref").parent().next(".error-message").fadeIn().text("Veuillez entrer votre r�f�rence.");
		valid = false;
	}
	else{
		$("#ref").css("border-color","#00FF00");
		$("#ref").parent().next(".error-message").fadeOut();
	}
 
	if ((document.getElementById("nom").selectedIndex=-1) && (document.getElementById("ip").selectedIndex=-1)){
	//if (($("#nom option:selected").val() == "") && ($("#ip option:selected").val()== "")){
	//if (($("#nom").selectedIndex == '-1') && ($("#ip").selectedIndex == '-1')){
		$("#nom").css("border-color","#FF0000");
		$("#ip").css("border-color","#FF0000");
		$("#nom").parent().next(".error-message").fadeIn().text("Veuillez s�lectionner un nom ou une adresse.");
		$("#ip").parent().next(".error-message").fadeIn().text("Veuillez s�lectionner un nom ou une adresse.");
		valid = false;
	}
	else{	
		$("#nom").css("border-color","#00FF00");
		$("#nom").parent().next(".error-message").fadeOut();
		$("#ip").css("border-color","#00FF00");
		$("#ip").parent().next(".error-message").fadeOut();
	}
	return valid;
}
        </script>
</head>				<form action="traitementApp.php" class="cmxform" id="frm_choix" method="post" onsubmit="return valider()">
			<fieldset>
				<legend>Identification </legend>
				<p>
					<label for='ref'>Référence </label><input type='text' name='ref' id='ref'>
					<label for='com'>Comentaire</label><input type='text' name='com' id='com'>
					<label for='nom'>Nom</label>
					<select name='nom[]' id='nom' size='4' multiple>
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<label for='ip'>Adresse</label>
					<select name='ip[]' id='ip'size='4' multiple>
						<option value='10.0.0.0'>10.0.0.0</option>
						<option value='10.0.0.2'>10.0.0.2</option>
						<option value='10.0.0.3'>10.0.0.3</option>
						<option value='10.0.0.5'>10.0.0.5</option>
						<option value='10.0.0.9'>10.0.0.9</option>
						<option value='10.0.0.10'>10.0.0.10</option>
						<option value='10.0.0.11'>10.0.0.11</option>
						<option value='10.0.0.12'>10.0.0.12</option>
						<option value='10.0.0.13'>10.0.0.13</option>
					</select>
				</p>
			</fieldset>
			<fieldset>
				<legend>Options</legend>
				<p>
					<label for="nbjour">Afficher les données depuis :</label>
					<select name="nbjour">
						<option value="0">Aucun tri</option>
						<option value="1">1 jours</option>
						<option value="7">7 jours</option>
						<option value="30">30 jours</option>
					</select>
				</p>
                                <p>
					<div id="error-message "></div>
				</p>
				<p>
					<input class="submit" type="submit" value="Envoyer">
				</p>
			</fieldset>
		</form>
	</body>
</html>

A priori ma conditionnelle ne fonctionne pas bien.

Code:

if ((document.getElementById("nom").selectedIndex=-1) && (document.getElementById("ip").selectedIndex=-1)){

Avez-vous une idée ?

Merci.

21/01/2012, 20h23
gege765

Bonsoir,

Voilà j'ai reformulé mon problème.
J'espère que mes explication sont claires

bonsoir,

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
<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>formulaire</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        $(document).ready(function(){
 
 
        $('#frm_choix').submit(function(){
 
        valid = true;
	if($("#ref").val() == ""){
		$("#ref").css("border-color","#FF0000");
		$("#ref").parent().next(".error-message").fadeIn().text("Veuillez entrer votre r�f�rence.");
		valid = false;
	}
	else{
		$("#ref").css("border-color","#00FF00");
		$("#ref").parent().next(".error-message").fadeOut();
	}
 
	if ((document.getElementById("nom").selectedIndex=-1) && (document.getElementById("ip").selectedIndex=-1)){
	//if (($("#nom option:selected").val() == "") && ($("#ip option:selected").val()== "")){
	//if (($("#nom").selectedIndex == '-1') && ($("#ip").selectedIndex == '-1')){
		$("#nom").css("border-color","#FF0000");
		$("#ip").css("border-color","#FF0000");
		$("#nom").parent().next(".error-message").fadeIn().text("Veuillez s�lectionner un nom ou une adresse.");
		$("#ip").parent().next(".error-message").fadeIn().text("Veuillez s�lectionner un nom ou une adresse.");
		valid = false;
	}
	else{	
		$("#nom").css("border-color","#00FF00");
		$("#nom").parent().next(".error-message").fadeOut();
		$("#ip").css("border-color","#00FF00");
		$("#ip").parent().next(".error-message").fadeOut();
	}
	return valid;
 
        });
 
 
        });
        </script>
</head>		<body>
 
<form action="traitementApp.php" class="cmxform" id="frm_choix" method="post" >
			<fieldset>
				<legend>Identification </legend>
				<p>
					<label for='ref'>Référence </label><input type='text' name='ref' id='ref'>
					<label for='com'>Comentaire</label><input type='text' name='com' id='com'>
					<label for='nom'>Nom</label>
					<select name='nom[]' id='nom' size='4' multiple>
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<label for='ip'>Adresse</label>
					<select name='ip[]' id='ip'size='4' multiple>
						<option value='10.0.0.0'>10.0.0.0</option>
						<option value='10.0.0.2'>10.0.0.2</option>
						<option value='10.0.0.3'>10.0.0.3</option>
						<option value='10.0.0.5'>10.0.0.5</option>
						<option value='10.0.0.9'>10.0.0.9</option>
						<option value='10.0.0.10'>10.0.0.10</option>
						<option value='10.0.0.11'>10.0.0.11</option>
						<option value='10.0.0.12'>10.0.0.12</option>
						<option value='10.0.0.13'>10.0.0.13</option>
					</select>
				</p>
			</fieldset>
			<fieldset>
				<legend>Options</legend>
				<p>
					<label for="nbjour">Afficher les données depuis :</label>
					<select name="nbjour">
						<option value="0">Aucun tri</option>
						<option value="1">1 jours</option>
						<option value="7">7 jours</option>
						<option value="30">30 jours</option>
					</select>
				</p>
                                <p>
					<div id="error-message "></div>
				</p>
				<p>
					<input class="submit" type="submit" value="Envoyer">
				</p>
			</fieldset>
		</form>
	</body>
</html>

21/01/2012, 22h10
gege765

Bonsoir,
Je viens de tester ce code ici : http://helptuto.fr/test/application/application6.php

Malheureusement la conditionnelle ne fonctionne pas sur l'ip et le nom.

Une idée ?
21/01/2012, 22h15
Golgotha

Il faut mettre "==" pour tester l'égalité, j'avais pas fait gaffe.

Code:

if ((document.getElementById("nom").selectedIndex==-1) && (document.getElementById("ip").selectedIndex==-1)){

:ccool:
21/01/2012, 22h28
gege765

:ccool: c'est fonctionnel. Moi non plus ne n''ai pas fais attention.
Par contre en cas d'erreur, mon texte précisant l'erreur ne s'affiche pas dans ma div et je ne vois pas pourquoi.

Ma méthode est-elle correcte ?
Si non que dois-je faire ?
Merci
21/01/2012, 23h31
Golgotha

si tu veux afficher ton message dans la div :

Code:

$("#error-message").fadeIn().text("Veuillez sélectionner un nom ou une adresse.");
22/01/2012, 00h15
gege765

C'est :ccool:

Une dernière question :
Ya t'il possibilité de faire une concaténation des messages ?
Car actuellement si plusieurs champs ne sont pas remplis j'ai qu'un seul message d'erreur ?

Démonstration visible ici : http://helptuto.fr/test/application/application7.php

Bonne nuit.

Bonsoir

"error-message" : il s'agit d'un ID, pas d'une classe !

val() (http://api.jquery.com/val/), si aucune option n'est sélectionnée il retourne null !

Mais il y avait aussi des erreurs de logique, beaucoup de choses à changer, voici mon code et ma page de test :

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />	
	<style>
		/* Base */
		html { font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0; padding:0; }
		body { background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td { word-wrap:break-word; }
		pre, code { white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select { max-width:100%; }
        img { border:none; }
		h1 { font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p { padding:0.6rem; }
		ul { margin-left:2.4rem; }
		.conteneur { width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer { margin-left:3.6rem; }
 
		/* --- */
</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<form id="frm_choix" action="traitementApp.php" class="cmxform" method="post">
			<fieldset>
				<legend>Identification </legend>
				<p>
					<label for='ref'>Référence </label><input type='text' name='ref' id='ref'>
					<label for='com'>Comentaire</label><input type='text' name='com' id='com'>
					<label for='nom'>Nom</label>
					<select name='nom[]' id='nom' size='4' multiple>
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<label for='ip'>Adresse</label>
					<select name='ip[]' id='ip'size='4' multiple>
						<option value='10.0.0.0'>10.0.0.0</option>
						<option value='10.0.0.2'>10.0.0.2</option>
						<option value='10.0.0.3'>10.0.0.3</option>
						<option value='10.0.0.5'>10.0.0.5</option>
						<option value='10.0.0.9'>10.0.0.9</option>
						<option value='10.0.0.10'>10.0.0.10</option>
						<option value='10.0.0.11'>10.0.0.11</option>
						<option value='10.0.0.12'>10.0.0.12</option>
						<option value='10.0.0.13'>10.0.0.13</option>
					</select>
				</p>
			</fieldset>
			<fieldset>
				<legend>Options</legend>
				<p>
					<label for="nbjour">Afficher les données depuis :</label>
					<select name="nbjour">
						<option value="0">Aucun tri</option>
						<option value="1">1 jours</option>
						<option value="7">7 jours</option>
						<option value="30">30 jours</option>
					</select>
				</p>
                <div id="error-message"></div>
				<p>
					<input class="submit" type="submit" value="Envoyer">
				</p>
			</fieldset>
		</form>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-22T00:16:09.000+01:00" pubdate>2012-01-22</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* Test */		
			$( "#frm_choix" ).submit( function(){
				var valid = true, // var !!
					jObjRef = $( "#ref" ),
					jObjNom = $( "#nom" ),
					jObjIp = $( "#ip" ),
					jObjError = $( "#error-message" ),
					messages = [];
 
				jObjError.hide().empty();
 
				if ( jObjRef.val() == "" ){
					jObjRef.css( "border-color", "#FF0000" );
					messages.push( "Veuillez entrer votre référence." );
					valid = false;
				} else {
					jObjRef.css( "border-color", "#00FF00" );
				}
 
				if ( !jObjNom.val() && !jObjIp.val() ){
					jObjNom.css( "border-color", "#FF0000" );
					jObjIp.css( "border-color", "#FF0000" );
					messages.push( "Veuillez sélectionner un nom ou une adresse." );
					valid = false;
				} else {	
					jObjNom.css( "border-color", "#00FF00" );
					jObjIp.css( "border-color", "#00FF00" );
				}
 
				if ( !valid ){
					jObjError.html( "<p>" + messages.join("<br/>") + "</p>" ).fadeIn();
				}
 
				return valid;
			});
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){			
		});
	</script>
</body>  
</html>

22/01/2012, 15h31
gege765

Merci pour ton aide et du partage de connaissance.
Je ne connaissais pas le plugin jPicker.

Je vais continuer mon formulaire et mettrais en résolu dès que possible.
22/01/2012, 19h24
gege765

Re,

Petite question :
Quel est l'équivalant en jquery de

Code:

if(document.getElementById('bbaie').checked == true){

J'ai essayé cela :

Code:

if ($('#bbaie :checked')){

Mais cela ne fonctionne pas, une idée ?
22/01/2012, 19h29
danielhagnoul

Bonsoir

Voir is() : http://api.jquery.com/is/

if ( $("#bbaie").is( ":checked") ){.
22/01/2012, 19h38
gege765

:ccool: ça fonctionne, merci.

@+