Prise en compte des changements d'un formulaire

**Gabriel_Enriquezdu67** · 12/05/2020, 13h46

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

**NoSmoking** · 13/05/2020, 18h09

Bonjour,
ton code es inutilement compliqué, à chaque fois que tu valides tu ajoutes un écouteur sur l'<input> qui ne sera effectif qu'à la saisie suivante.
De plus lorsque l'on écrit une fonction de rappel, ta fonction updateValue le paramètre récupéré correspond à l'objet Event donc tu ne peux pas l'utiliser tel que.

Exemple de ce que cela pourrait être en plaçant l'écouteur directement sur l'élément <form>.

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
function verifFormulaire (ev){
  // récup. champ en cours de saisie
  const elem = ev.target;
  // récup du name de l'élémentt, on pourrait faire directement elem.name
  const elName = elem.getAttribute("name");
  // récup le valeur de l'élément
  const elValue = elem.value;  // déclarer avec let si modif à faire
  // juste pour voir
  console.log("Objet en cours :", elem);
  // on traite suivant le cas avec if ou encore un switch
  if( "nom" === elName){
    console.log("vérif du nom");
  }
  if( "prenom" === elName){
    console.log("vérif du prenom");
  }
  if( "mdp" === elName){
    console.log("vérif du mot de passe");
  }
}
// on place l'écouteur sur le formulaire
const oForm = document.querySelector("form");
oForm.addEventListener("input", verifFormulaire);

PS : si le but est de mettre juste la première lettre en majuscule il doit bien exister des milliers de façons de faire avec plus ou moins de contrainte !

**Gabriel_Enriquezdu67** · 13/05/2020, 19h02

D'accord, merci beaucoup pour ta réponse,

J'ai suivi tes conseils, et maintenant, j'ai réussi à faire ce que je voulais pour mon formulaire, sans trop le charger d'écouteurs sur les <input>.

Merci pour ton aide,

Bien cordialement

Prise en compte des changements d'un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager