Validation d'un formulaire

**estelle27k** · 16/04/2008, 22h08

Bonsoir
je souhaite valider ce formulaire html/php via un script en JS

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
123
124
125
126
127
128
129
130
131
 
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>MP3 Island - Enregistrez vous !! </title>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
		<link rel="stylesheet" href="styles-heet.css" type="text/css" />
 
		<script src="/mp3island/javascript/verif_champ.js" language="JavaScript" type="text/JavaScript"></script>
 
	</head>
 
	<body>
 
		<div class="top">
			<p align="left"><?php include("top.php"); ?> </p>
		</div>
 
		<center>
	<br>
	<br>
 		<div id="formInscrip">
 		<b>REMPLIR LE FORMULAIRE SVP</b>
 		<div  id="formInscip1">
		<form action="#">
		<p><label for="userName">Votre nom :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" size="30" id="userName" class="reqd" /></label></p><br>
		<p><label for="lastName">Votre prenom :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" size="30" id="lastName" class="reqd" /></label></p><br>
		<p><label for="pseudoName">Votre pseudo :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="30" id="pseudoName" class="reqd" /></label></p><br>
		<p><label for="mail">Votre e-Mail : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="30" id="mail" class="reqd email" /></label></p><br>
		<p><label for="passwd1">Votre Mot de passe :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="password" id="passwd1" class="reqd"></label></p><br>
		<p><label for="passwd2">Retapez votre Mot de passe :&nbsp;&nbsp; <input type="password" id="passwd2" class="reqd passwd1"></label></p><br>
    	<p><label for="dateNais">Votre date de naissance :
 
			<select id="months">
				<option value="0">01</option>
				<option value="1">02</option>
				<option value="2">03</option>
				<option value="3">04</option>
				<option value="4">05</option>
				<option value="5">06</option>
				<option value="6">07</option>
				<option value="7">08</option>
				<option value="8">09</option>
				<option value="9">10</option>
				<option value="10">11</option>
				<option value="11">12</option>
			</select>
 
			<select id="days">
				<option>01</option>
			</select>
 
			<select id="years">
				<option>2008</option>
				<option>2007</option>
				<option>2006</option>
				<option>2005</option>
				<option>2004</option>
				<option>2003</option>
				<option>2002</option>
				<option>2001</option>
				<option>2000</option>
				<option>1999</option>
				<option>1998</option>
				<option>1997</option>
				<option>1996</option>
				<option>1995</option>
				<option>1994</option>
				<option>1993</option>
				<option>1992</option>
				<option>1991</option>
				<option>1990</option>
				<option>1989</option>
				<option>1988</option>
				<option>1987</option>
				<option>1986</option>
				<option>1985</option>
				<option>1984</option>
				<option>1983</option>
				<option>1982</option>
				<option>1981</option>
				<option>1980</option>
				<option>1979</option>
				<option>1978</option>
				<option>1977</option>
				<option>1976</option>
				<option>1975</option>
				<option>1974</option>
				<option>1973</option>
				<option>1972</option>
				<option>1971</option>
				<option>1970</option>
				<option>1969</option>
				<option>1968</option>
				<option>1967</option>
				<option>1965</option>
				<option>1964</option>
				<option>1963</option>
				<option>1962</option>
				<option>1961</option>
				<option>1960</option>
				<option>1959</option>
				<option>1958</option>
				<option>1957</option>
				<option>1956</option>
				<option>1955</option>
				<option>1954</option>
				<option>1953</option>
				<option>1952</option>
				<option>1951</option>
				<option>1950</option>	
			</select></label></p>
 
		<br><br>
 
		<center><p><input type="submit" value="Soumettre"/>&nbsp;<input type="reset" value="Effacer"/></p></center>
		</form>
		</div>
		<h6>*Veuillez remplir tous les champs svp.</h6>
	 </div>
	</center>	
 
 
 
 	</body>
 
 
 
</html>

le script que j'ai écrit

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
 
window.onload = initForms;
window.onload = initForm;
 
function initForm() {
	document.getElementById("months").selectedIndex = 0;
	document.getElementById("months").onchange = populateDays;
}
 
function populateDays() {
	 var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	 var monthStr = this.options[this.selectedIndex].value;
	 if (monthStr != "") {
	 	var theMonth = parseInt(monthStr);
	 	document.getElementById("days").options.length = 0;
	 	for(var i=0; i<monthDays[theMonth]; i++) {
	 		document.getElementById("days").options[i] = new Option(i+1);
		}
	}
}
 
 
function initForms() {
	for (var i=0; i< document.forms.length; i++) {
		document.forms[i].onsubmit = function() {return validForm();}
	}
}
 
 
 
 
 
function validForm() {
	var allGood = true;
	var allTags = document.getElementsByTagName("*");
 
	for (var i=0; i<allTags.length; i++) {
		if (!validTag(allTags[i])) {
			allGood = false;
		}
	}
 
	return allGood;
 
 
	function validTag(thisTag) {
		var outClass = "";
		var allClasses = thisTag.className.split(" ");
 
		for(var j=0; j<allClasses.length; j++) {
			outClass += validBasedOnClass(allClasses[j]) + " ";
		}
		thisTag.className = outClass;
 
		if (outClass.indexOf("invalid") > -1) {
			invalidLabel(thisTag.parentNode);
			thisTag.focus();
			if (thisTag.nodeName == "INPUT"){
				thisTag.select();
			}
			return false;
		}
		return true;
 
 
		function validBasedOnClass(thisClass) {
			var classBack = "";
 
			switch(thisClass) {
				case "":
				case "invalid":
					break;
				case "reqd":
					if (allGood && thisTag.value=="") classBack = "invalid";
						classBack += thisClass;
						break;
				default:
					if (allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid";
					classBack += thisClass;
 
					}
				return classBack;
 
			}
 
 
			function crossCheck(inTag,otherFieldID) {
				if (!document.getElementById(otherFieldID)) return false;
					return (inTag.value == document.getElementById(otherFielID).value);
				}
 
 
			function invalidLabel(parentTag) {
				if (parentTag.nodeName == "LABEL") {
					parentTag.className += "invalid";
				}
			}
 
			function validEmail(email) {
				var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
 
				return re.test(email);
				}
 
 
		}
	}

mais ca marche pas , pourtant je vois pas d'erreurs

merci de bien vouloir m'aider

**SpaceFrog** · 17/04/2008, 10h19

Code :

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

1
2
window.onload = initForms;
window.onload = initForm;

tu es sur qui'l fera les deux avec cette syntaxe ?

**estelle27k** · 17/04/2008, 14h17

j'ai modifié
j'ai fait

Code :

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

1
2
 
window.onload = function() { initForm(); initForms();}

mais ca marche pas toujours

**Matthieu2000** · 17/04/2008, 17h53

erreurs?
Enlève les déclarations var à l'intérieur des boucles

Validation d'un formulaire

JavaScript

Discussions similaires

Partager

Partager