jquery et validation de formulaire

**gege765** · 20/01/2012, 20h11

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 :

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

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

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

Avez-vous une idée ?

Merci.

**gege765** · 21/01/2012, 20h23

Bonsoir,

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

**Golgotha** · 21/01/2012, 21h55

bonsoir,

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

**gege765** · 21/01/2012, 22h10

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 ?

**Golgotha** · 21/01/2012, 22h15

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

Code :

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

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

**gege765** · 21/01/2012, 22h28

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

jquery et validation de formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager