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 :

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";
        }
    })
}
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