JS pour le web - Exercice P2C3 - Validez les données saisies par vos utilisateurs par DavidLbc - page 2

Banzai2030

8 novembre 2020 à 0:40:52

d'après ce que j'ai compris il faut le faire en HTML5 et pas en JavaScript ( je parle pour la question 3 du C2P3)

en gros il faut :

1- ajouter l'attribut "required" sur la balise input du mail pour rendre le champ obligatoire

2-toujours sur la même balise mettre la valeur de l'attribut type a "email" au lieu de "text"cela obligera l’utilisateur a entrer un mail au bon format avant de pouvoir être transmis.

Tortue_Ninja

8 novembre 2020 à 13:22:22

Bonjour a tous pour la partie 1 de l'exercice

Nous souhaitons dans un premier temps valider le champ Code du formulaire. A chaque lettre saisie dans le champ ayant pour ID code nous voulons vérifier que la valeur du champ commence bien par CODE- grâce à une Regex que voici : /^CODE-/. Si la valeur commence bien par CODE- alors nous affichons dans l'élément ayant pour ID code-validation : Code valide, sinon nous affichons dans cet élément Code invalide.

il faut :

//recupere le input du code avec un querySelector. 

//ecouter le changement de chaque lettre via l'evenement 'input' sur l'input #code

  //Ensuite on va tester la regEx avec .test sur la valeur du champ input code

let regEx = /^CODE-/;

let testCode = regEx.test(input.value);

//Ensuite on verifie si testCode est vraie alors on affiche code valide 
//sinon on affiche code invalide

Pour voir la solution vous pouvez venir ici.
https://codepen.io/phytonroyale/pen/ExKxzQE

-
Edité par Tortue_Ninja 8 novembre 2020 à 19:11:20

Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'

Banzai2030

8 novembre 2020 à 17:43:41 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

dk13005

20 novembre 2020 à 10:40:45

bonjour, merci pour le tuyau Tortue_Ninja !! Je bloquais sur ça également !!

effectivement ces cours sont succins surtout pour des débutants comme moi !

je post mon code qui est fonctionnel grâce a votre aide merci encore

var code = document.getElementById('code');
var button = document.getElementById('submit-btn');
var codeValidation = document.getElementById('code-validation');



code.addEventListener('input',function(){
  var regEx = /CODE-/;
  var testRegEx = regEx.test(code.value);
  if (testRegEx){
    codeValidation.innerHTML = "code valide";
    button.disabled = false;
    
    
  }else {
    codeValidation.innerHTML = " code invalide";
    button.disabled = true ;
    
    
  }
});

ainsi que le code html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="base.css">
  </head>
  <body>  
    <form id="form-to-check">
      <p>
        <label>Code : <input type="text" name="code" id="code" /></label><br />
        <div class="result" id="code-validation"></div>
      </p>
      <p>
        <label>Email : <input type="email" name="email" required /></label>
      </p>
      <p>
         <input type="submit" value="Vérifier" id="submit-btn" />
      </p>
    </form>
    
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

TimotheMazard

11 avril 2021 à 19:03:10

Bonjour à tous,

Voici le résultat de l'exercice P2C4 pour le cours intitulé "Ecrivez du JS pour le web".

J'ai utilisé pour ce practice l'API fetch beaucoup plus au goût du jour que XMLHttpRequest.

Voici le lien: lien

Bon apprentissage à tous !

CarineMPAKA

19 avril 2021 à 19:07:23 - Message modéré pour le motif suivant : Message masqué à la demande de l'auteur.

AMARAPARROT

22 avril 2021 à 13:07:05

dk13005 a écrit:

bonjour, merci pour le tuyau Tortue_Ninja !! Je bloquais sur ça également !!

effectivement ces cours sont succins surtout pour des débutants comme moi !

je post mon code qui est fonctionnel grâce a votre aide merci encore

var code = document.getElementById('code');
var button = document.getElementById('submit-btn');
var codeValidation = document.getElementById('code-validation');



code.addEventListener('input',function(){
  var regEx = /CODE-/;
  var testRegEx = regEx.test(code.value);
  if (testRegEx){
    codeValidation.innerHTML = "code valide";
    button.disabled = false;
    
    
  }else {
    codeValidation.innerHTML = " code invalide";
    button.disabled = true ;
    
    
  }
});

ainsi que le code html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="base.css">
  </head>
  <body>  
    <form id="form-to-check">
      <p>
        <label>Code : <input type="text" name="code" id="code" /></label><br />
        <div class="result" id="code-validation"></div>
      </p>
      <p>
        <label>Email : <input type="email" name="email" required /></label>
      </p>
      <p>
         <input type="submit" value="Vérifier" id="submit-btn" />
      </p>
    </form>
    
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Bonjour, pourquoi avoir déclarer ??:

J'ai pas compris la ligne 8 et 9

var regEx = /CODE-/;

var testRegEx = regEx.test(code.value);

dk13005

24 avril 2021 à 14:07:09

salut amaraparrot, si je me souviens bien vu que j'ai fait cet exo il y a un moment je crée une regex a la ligne 8 qui correspond a ce par quoi doit commencer le champ input , ensuite je compare cette variable regex avec ce qu'a saisie l'utilisateur dans le champ input et si cela commence par CODE- alors la variable testRegEx vaut true ce qui permet de lancer la condition qui vient aprés

AMARAPARROT

26 avril 2021 à 12:53:57

dk13005 a écrit:

salut amaraparrot, si je me souviens bien vu que j'ai fait cet exo il y a un moment je crée une regex a la ligne 8 qui correspond a ce par quoi doit commencer le champ input , ensuite je compare cette variable regex avec ce qu'a saisie l'utilisateur dans le champ input et si cela commence par CODE- alors la variable testRegEx vaut true ce qui permet de lancer la condition qui vient aprés

Bonjour,

Daccord merci mais comment le deviner qu'il faut creer un regex??

Je veux dire dans lexercice en question, ils nous demandent pas de déclarer un regex et de le comparer avec la saisie de l'utilisateur ?? je pensais qu'il fallait faire une condition directement