Prise en compte des changements d'un formulaire
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:
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 :
Code:
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";
}
})
} |
J'ai cherché, mais je n'arrive pas à trouver ce qui est à l'origine de ce problème.
Auriez-vous une idée concernant ce problème ?
En vous remerciant par avance pour votre réponse,
Bien cordialement
