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