Bonjour,
Je suis étudiant, et débutant en JavaScript.
J'ai créé une page de connexion sur un site, et je veux rendre cette page dynamique.
Mon but est de permettre à l'utilisateur de voir si, pour son prénom, il a bien mis la première lettre en majuscule et les autres en minuscule, si c'est le cas, un OK vert s'affiche à droite de l'<input> du prénom, sinon, c'est une croix rouge.
Mon code ne fonctionne pas, puisque lorsque je tape dans le champ Prénom quelque chose, cela ne réagit pas.
La page connexion.php :
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 <?php ?> <html> <head> <title>Page de connexion</title> </head> <h1>Connexion : </h1> <h2>Entrez vos noms et prénoms et votre mot de passe : </h2> <form action="../controleurs/traitementConnexion.php" method="post" onchange="return validateForm()"> <p><label>Prénom</label> : <input type="text" name="prenom" id="inputConnexionPrenom"><span id="prenom"></span></p> <p><label>Nom</label> : <input type="text" name="nom"></p> <p><label>Mot de passe</label> : <input type="password" name="mdp"></p> <input type="submit" name="validation"> </form> <script src="jsfile.js"></script> </html>
, et la page JavaScript jsfile.js associée :
J'ai cherché, mais je n'arrive pas à trouver ce qui est à l'origine de ce problème.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 function validateForm() { prenom = document.getElementById("prenom"); inputConnexion = document.getElementById("inputConnexionPrenom"); inputConnexion.addEventListener('input', function updateValue(e) { if(e.substr(0, 1) === e.substr(0, 1).toUpperCase() && e.substr(1) === e.substr(1).toLowerCase()) { prenom.textContent = "OK"; prenom.style.color = "green"; } else { prenom.textContent = "X"; prenom.style.color = "red"; } }) }
Auriez-vous une idée concernant ce problème ?
En vous remerciant par avance pour votre réponse,
Bien cordialement
Partager