Validation de formulaire

Version imprimable

Bonjour, je suis nouveau sur ce forum, j'ai un projet a rendre pour mes études se soir à 23h42, et je dois créer un formulaire, et le valider avec js, je n'ai jamais fais de java script alors si je pouvais avoir de l'aide ca serait génial ! j'ai essayer quelque chose mais cela ne donne rien du tout il ne se passe rien ! Pour l'instant j'ai essayer seulement pour le champs "nom". Merci a vous pour votre aide :)

Mon code html:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="my_style.css">
    <script type="text/javascript" src="my_script.js"></script>
    <title>Formulaire</title>
</head>
 
<body>
 
    <form name="myForm" action="my-form" id="form" method="post" onSubmit="return validation()">
 
    <div>
        <label  class="border" for="homme" >Sexe :</label>
        <input type="radio" id="homme" name="sexe" value="homme">
        <label for="homme">Homme</label>
 
        <input type="radio" id="femme" name="sexe" value="femme">
        <label for="femme">Femme</label>
 
        <input type="radio" id="autre" name="sexe" value="autre">
        <label for="autre">Autre</label>
    </div>
 
    <br>
 
    <div>
        <label for="civilite">Civilité</label>
    <select name="civilite" id="civilite">
        <option value="monsieur">M.</option>
        <option value="madame">Mme.</option>
     </select>
    </div>
 
    <br>
 
    <div>
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" minlength="2">
    </div>
 
    <br>
 
    <div>
        <label  class="border" for="email">Email:</label>
        <input type="email" id="email" size="28" >
    </div>
 
    <br>
    <div>
        <label for="tel">Telephone:</label>
        <input type="tel" id="tel" name="tel" required>
 
    </div>
 
    <br>
 
    <div>
        <label for="website">Website :</label>
        <input type="url" name="website" id="website" pattern="https://.*" size="30" required>
    </div>
 
    <br>
 
    <div>
        <label class="border" for="date">Date de naissance :</label>
        <input type="date" id="date" name="naissance"  min="1980-01-01">
 
    </div>
 
    <br>
 
    <div>
        <label for="jeuxvideo">Hobbies :</label>
        <input type="checkbox" id="jeuxvideo" name="jeuxvideo">
        <label for="jeuxvideo">Jeux video</label>
 
 
        <input type="checkbox" id="cinema" name="cinema" >
        <label for="cinema">Cinema</label>
 
        <input type="checkbox" id="lecture" name="lecture" >
        <label for="lecture">Lecture</label>
 
        <input type="checkbox" id="sport" name="sport">
        <label for="sport">Sport</label>
 
        <input type="checkbox" id="informatique" name="informatique">
        <label for="informatique">Informatique</label>
    </div>
 
    <br>
 
    <div>
        <input type="hidden" id="token" name="token" value="my first website">
    </div>
 
    <div>
        <input type="submit" id="bouton" value="Validation">
    </div>
 
</form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

Mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
window.onload=function(){
 
    var form = document.getElementById('form');
 
    form.addEventListener('submit', function(validation){
        var name =  document.getElementById('nom');
 
        if(name.value.trim() == ""){
        var error = document.getElementById('error');
        error.innerHTML = "eee";
        error.style.color ="red";
            validation.preventDefault();
        }
    })
 
}

Salut !

Déjà, tu t'y prends peut-être un peu tard pour rendre un projet :p

Plus sérieusement, si j'ai bien compris, tu aimerais avoir un script js qui vérifie que les champs de ton formulaire soient bien remplis et tu n'as aucun message d'erreur dans ta console ?

Je ne peux pas faire tellement grand chose pour t'aider si ce n'est t'orienter vers cette doc: Validation des données de formulaires

Tu devrais y trouver tout ce dont tu as besoin après une lecture minutieuse. Aussi, tu devrais essayer de log

Citation:

console.log(var)

pour vérifier les données que tu traites, dans ton cas:
Code:

1 2 console.log(name.value) console.log(error)
Ca te permettrais déjà de voir si tu pointes sur les bon éléments et leur contenus.

Une dernière chose, je remarque que tu places l'évènement 'onsubmit' deux fois sur ton formulaire, côté html et javascript. Je pense que ça peut créer une confusion alors je te conseil d'en garder un seul. Personnellement je ferais ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 document.addEventListener('DOMContentLoaded', function() { // Quand le contenu de ta page est entièrement chargé let form = document.querySelector('form#form') // tu pointes une balise "form" avec l'id "form" console.log(form); // Afin de vérifier que tu pointes bien sur ton formulaire form.addEventListener('submit', function(form) { // Quand ton formulaire est soumis let name = document.querySelector('input#name'); // Pointe ton input name console.log(name); // Vérifie que tu as bien pointer ton input if (name.value.trim() === "") { // Ta gestion des erreurs return false; // Bloque la soumission du formulaire } return true; // Si tout est ok pour la soumission }); });
Voilà, je ne te met pas tout le code, sinon tu n'apprendrais rien !

En espérant que cela t'aide à finir à temps,
Skunka.

15/11/2020, 21h58
CosmoKnacki

Il n'y a pas de problème particulier avec ton javascript. Par contre il n'y a pas d'élément avec l'id error dans ton code html.
Aussi l'attribut onsubmit de l'élément form ne sert à rien puisque tu définis déjà un gestionnaire d'évènement pour la même chose dans ton code javascript.
À noter que si les deux conditions html (le téléphone et l'URL) ne sont pas remplies correctement, le formulaire ne sera même pas soumis, et par conséquent, l'évènement submit ne se produira pas.
15/11/2020, 22h32
lunix7

Bonsoir et merci pour votre aide !
J'ai rajouter le span "error" enlevé le onsubmit et ca ne marche toujours pas... Ce n'ai pas que je m'y prends tard pour le rendre c'est que je bloque depuis hier je ne comprends pas pourquoi cela ne fonctionne pas...
Et d'ailleurs, désolé pour cette question sans doute stupide mais je n'ai absolument jamais touché au js depuis hier, mais quand j'essaye d'ajouter un "console" dans mon js, dreamweaver me ressors "unexpected console statement no-console". En tout cas merci pour votre aide c'est tres gentil :)
15/11/2020, 22h45
Skunka

Pourrais-tu nous mettre ton code à jour ? Histoire de voir ce qui en va pas ^^

Pour ton histoire de console, je te renvoie sur ce lien qui m'a l'air bien rédigé en t'expliquant pourquoi tu as cette erreur et comment y remédier: Adobe-Dreamweaver-console-not-defined

De ce que j'ai compris "console" est un objet du navigateur et non une variable global du langage, il te faut donc spécifier la console (solution la plus rapide) ou passer sur un autre IDE.

Courage, tu vas y arriver !

D'accord voici le

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="my_style.css">
    <script type="text/javascript" src="my_script.js"></script>
    <title>Formulaire</title>
</head>
 
<body>
 
    <form name="myForm" action="my-form" id="form" method="post">
 
    <div>
        <label  class="border" for="homme" >Sexe :</label>
        <input type="radio" id="homme" name="sexe" value="homme">
        <label for="homme">Homme</label>
 
        <input type="radio" id="femme" name="sexe" value="femme">
        <label for="femme">Femme</label>
 
        <input type="radio" id="autre" name="sexe" value="autre">
        <label for="autre">Autre</label>
    </div>
 
    <br>
 
    <div>
        <label for="civilite">Civilité</label>
    <select name="civilite" id="civilite">
        <option value="monsieur">M.</option>
        <option value="madame">Mme.</option>
     </select>
    </div>
 
    <br>
 
    <div>
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" minlength="2">
		<span id="error"></span>
    </div>
 
    <br>
 
    <div>
        <label  class="border" for="email">Email:</label>
        <input type="email" id="email" size="28" >
    </div>
 
    <br>
    <div>
        <label for="tel">Telephone:</label>
        <input type="tel" id="tel" name="tel" required>
 
    </div>
 
    <br>
 
    <div>
        <label for="website">Website :</label>
        <input type="url" name="website" id="website" pattern="https://.*" size="30" required>
    </div>
 
    <br>
 
    <div>
        <label class="border" for="date">Date de naissance :</label>
        <input type="date" id="date" name="naissance"  min="1980-01-01">
 
    </div>
 
    <br>
 
    <div>
        <label for="jeuxvideo">Hobbies :</label>
        <input type="checkbox" id="jeuxvideo" name="jeuxvideo">
        <label for="jeuxvideo">Jeux video</label>
 
 
        <input type="checkbox" id="cinema" name="cinema" >
        <label for="cinema">Cinema</label>
 
        <input type="checkbox" id="lecture" name="lecture" >
        <label for="lecture">Lecture</label>
 
        <input type="checkbox" id="sport" name="sport">
        <label for="sport">Sport</label>
 
        <input type="checkbox" id="informatique" name="informatique">
        <label for="informatique">Informatique</label>
    </div>
 
    <br>
 
    <div>
        <input type="hidden" id="token" name="token" value="my first website">
    </div>
 
    <div>
        <input type="submit" id="bouton" value="Validation">
    </div>
 
</form>
</body>
</html>

et le

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload=function(){
 
    var form = document.getElementById('form');
 
    form.addEventListener('submit', function(validation){
        var name =  document.getElementById('nom');
 
        if(name.value.trim() == ""){
        var error = document.getElementById('error');
        error.innerHTML = "eee";
        error.style.color ="red";
            validation.preventDefault();
        }
    })
 
}

voila voila, et j'ai vais regarder pour l'histoire de console, en tout cas merci beaucoup de prendre de votre temps pour m'aider c'est vraiment gentil !

15/11/2020, 22h58
lunix7

je viens d'essayer les "console.log" la console ne me retourne rien du tout...

Je ne sais pas ce que tu as bouiné, et je ne suis pas fan de Dreamweaver, mais chez moi ça marche avec:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <script>window.onload=function(){
 
    var form = document.getElementById('form');
 
    form.addEventListener('submit', function(validation){
        var name =  document.getElementById('nom');
 
        if(name.value.trim() == ""){
        var error = document.getElementById('error');
        error.innerHTML = "eee";
        error.style.color ="red";
            validation.preventDefault();
        }
    })
 
}</script>
    <title>Formulaire</title>
</head>
 
<body>
    <div id="error" style="height:200px; width: 200px; background-color: navy;"></div>
    <form name="myForm" action="my-form" id="form" method="post">
 
    <div>
        <label  class="border" for="homme" >Sexe :</label>
        <input type="radio" id="homme" name="sexe" value="homme">
        <label for="homme">Homme</label>
 
        <input type="radio" id="femme" name="sexe" value="femme">
        <label for="femme">Femme</label>
 
        <input type="radio" id="autre" name="sexe" value="autre">
        <label for="autre">Autre</label>
    </div>
 
    <br>
 
    <div>
        <label for="civilite">Civilité</label>
    <select name="civilite" id="civilite">
        <option value="monsieur">M.</option>
        <option value="madame">Mme.</option>
     </select>
    </div>
 
    <br>
 
    <div>
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" minlength="2">
    </div>
 
    <br>
 
    <div>
        <label  class="border" for="email">Email:</label>
        <input type="email" id="email" size="28" >
    </div>
 
    <br>
    <div>
        <label for="tel">Telephone:</label>
        <input type="tel" id="tel" name="tel" required>
 
    </div>
 
    <br>
 
    <div>
        <label for="website">Website :</label>
        <input type="url" name="website" id="website" pattern="https://.*" size="30" required>
    </div>
 
    <br>
 
    <div>
        <label class="border" for="date">Date de naissance :</label>
        <input type="date" id="date" name="naissance"  min="1980-01-01">
 
    </div>
 
    <br>
 
    <div>
        <label for="jeuxvideo">Hobbies :</label>
        <input type="checkbox" id="jeuxvideo" name="jeuxvideo">
        <label for="jeuxvideo">Jeux video</label>
 
 
        <input type="checkbox" id="cinema" name="cinema" >
        <label for="cinema">Cinema</label>
 
        <input type="checkbox" id="lecture" name="lecture" >
        <label for="lecture">Lecture</label>
 
        <input type="checkbox" id="sport" name="sport">
        <label for="sport">Sport</label>
 
        <input type="checkbox" id="informatique" name="informatique">
        <label for="informatique">Informatique</label>
    </div>
 
    <br>
 
    <div>
        <input type="hidden" id="token" name="token" value="my first website">
    </div>
 
    <div>
        <input type="submit" id="bouton" value="Validation">
    </div>
 
</form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

J'ai mis 1 comme numéro de tel et https://truc pour l'URL

15/11/2020, 23h49
Skunka

Personnellement je ne connaissais pas Dreamweaver mais j'imagine que tu utilises tout de même un navigateur pour tester ? Si oui, essaye directement de faire un console.log(document.getElementById('error') depuis la console du navigateur. Il se peut que ton script ne soit pas exécuté à cause des erreurs crées par le console.log() puisqu'il n'est pas reconnu pas ton IDE. Je me demande même si ton fichier javascript est bien importé. Peut-être en faisant de même manière que CosmoKnacki, place directement ton javascript dans une balise <script></script> dans ton fichier html sans les console.log() pour éviter des erreurs. Sinon j'arrive à court d'idée là ^^
17/11/2020, 11h28
lunix7

Bonjour, et bien finalement je suis passé a l'oral comme prévu et ayant exécuter mon code sur une vm n'ayant que firefox le script a fonctionné, alors je ne sais pas pourquoi il ne fonctionne pas sur chrome mais en tout cas, il a marcher pour mon oral et j'ai pu faire le rendu qur github a temps :) en tout cas merci a tous pour votre aide :)