Impossible d'affecter du code CSS

**lockmanz** · 14/11/2018, 21h29

Bonsoir,

J'ai un code qui consiste à saisir un pseudo et un email, une fois celui-ci valide je clique sur le bouton validé et ce bouton doit mettre en fond rouge la valeur fausse
remarque : pour avoir une valeur fausse il suffit de saisir un pseudo avec des caractère :"('-"-'&é'"('""
(or ceci ne fonctionne que au code pas de façon permanente).
Je ne vois pas d'ou peux venir mon erreur.

Voici mon code :

code javascript

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
function est_alphanumerique(chaine) {
	//cette fonction verifie si le caractere est alphanumerique des lettres majuscules et miniscules et des nombres
    var i;
    for (i = 0; i < chaine.length; i = i + 1) {
        if (chaine.charCodeAt(i) < 48 || (chaine.charCodeAt(i)>=58 && chaine.charCodeAt(i)<=64)||(chaine.charCodeAt(i)>=91 && chaine.charCodeAt(i)<=96)||chaine.charCodeAt(i)>=123) {
            return 0;
        }
    }
    return 1;
}
function est_correcte_mail(mail) {
	//cette fonction verifie le mail avec présence d'un seul @ et d'un seul point avec au moins 2 caractères avant et après le point
	var i;
	var point=0;
	var arob=0;
	var nb=0;
	var nb1=0;
    for (i = 0; i < mail.length; i = i + 1) {
		if (mail.charCodeAt(i) == 64) {
			nb=nb+1;
			arob=i;
		}
		if (mail.charCodeAt(i) == 46) {
			nb1=nb1+1;
			point=i;
		}
	}
	if (nb > 1 || nb1 > 1) {
		return 0;
	} else {
		if (point-arob>=3 && mail.length-1-point>=2) {
			return 1;	
		} else {
			return 0;
		}
	}
 
}
function desactiver_validation() {
}
function verification_formulaire() {
    "use strict";
    var pseudo = document.getElementById("pseudo").value;
    var mail = document.getElementById("mail").value;
    var i = 0;
	var erreur=0
    if (8 <= pseudo.length && pseudo.length <= 25) {
        if (est_alphanumerique(pseudo)) {
			if (mail.length <= 25) {
				if(est_correcte_mail(mail)) {
					alert("Compte enregistré");
					//c'est à cette ligne ci-dessus que le code ne fonctionne pas
					document.getElementById("bouton").setAttribute("disabled", "true");
				} 
				else 
				{
					erreur=2;
				}
			} 
			else 
			{
				erreur=2;
			}
        }
		else 
		{
 
			erreur=1;
		}
	}
	else 
	{
		erreur=1;
	}
	if (erreur==1) {
		document.getElementById("pseudo").style.backgroundColor = "red";
	}
	if (erreur==2) {
		document.getElementById("mail").style.backgroundColor = "red";
	}
 
}

Code HTML :

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
<!DOCTYPE html>
<html lang="fr">
   <head>
 
      <link rel="stylesheet" href="style.css" />   
      <title>TP7_exo1</title>
      <script src="scripts.js"></script>
   </head>
   <body>
 
		<form>
			<p>
			   <label for="pseudo">Votre pseudo :</label>
			   <input maxlength="30" type="text" name="pseudo" id="pseudo" />
			   <br/>
			   <label for="mail">Votre adresse mail :</label>
			   <input maxlength="30" type="mail" name="mail" id="mail" />
			   <input id="bouton" type="submit" onClick="verification_formulaire()" value="Valider" />
			</p>
		</form>
   </body>
</html>

Code CSS :

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

1
2
3
4
body 
{
	background-color:gray;
}

Voici les liens pour tester le code:
https://154160.playcode.io/?pseudo=&mail=
https://playcode.io/154167?tabs=cons...ex.html&output

**ProgElecT** · 14/11/2018, 22h39

Salut

(or ceci ne fonctionne que au code pas de façon permanente)

Peux tu être plus explicite ?

**Beginner.** · 14/11/2018, 22h40

Salut,

Je ne suis pas sûr d'avoir compris ce que tu veux dire (je vais regarder le code...) mais juste pour info tu pourrais utiliser l'attribut "pattern" :

Envoyé par MDN

Une expression rationnelle qui permet de vérifier la valeur saisie. L'expression doit correspondre à la valeur entière. L'attribut title peut être utilisé pour décrire le motif et aider l'utilisateur. Cet attribut est appliqué lorsque type vaut text, search, tel, url, email ou password, dans les autres cas, il est ignoré. Le langage d'expression rationnelle est le même que celui utilisé en JavaScript (cf. RegExp) et le paramètre 'u' permet de traiter l'expression comme une suite de codets Unicode. L'expression utilisée n'est pas entourée de barres obliques (slash).

Tu peux personnaliser le message et le CSS avec ":valid" et ":invalid"...

**Beginner.** · 14/11/2018, 23h14

Ah j'ai regardé ton code, il y aurait beaucoup de chose à dire...

Envoyé par lockmanz

(or ceci ne fonctionne que au code pas de façon permanente).

La vérification tu la lances seulement quand on clique sur le bouton "valider" donc avant cela il ne se passe rien alors si tu veux la lancer à chaque fois qu'on tape une touche il faudra traiter l'éventement keyup...

Je te conseil ce que je t'ai dit dans mon message précédent...

**lockmanz** · 15/11/2018, 08h14

Merci pour vos réponses,
pour être plus précis, ce que je veux c'est que dès que je clique sur valider si mon pseudo (ou mail) ne respecte pas la syntaxe le fond de celui-ci devient rouge (au lieu de blanc) et reste rouge.
Or dans mon code il est rouge qu'une fraction de seconde lorsque j'appuie sur le bouton valider.

**SpaceFrog** · 15/11/2018, 08h28

tu lances la vérification sur le onclick de ton bouton submit ...
à aucun moment tu n'inhibes l'envoi ...
je ne vois pas de return false
Jette un oeil par là
https://www.developpez.net/forums/d5...on-formulaire/

Impossible d'affecter du code CSS

JavaScript

Discussions similaires

Partager

Partager