Cours 19 - Validation de formulaire sans celles du navigateur

Objectifs

Déroulement

  1. Introduction
  2. Concept de base
  3. Démonstration - Utilisation de validations
  4. Exercice 19
  5. Conclusion

Concept de base

Fonctionnement

Code HTML

<form action="" id="frm_test" name="frm_test" class="frm_test" method="post">
  <!-- groupe d'éléments de formulaire -->
  <fieldset>
      <!-- description du groupe -->
      <legend>Saisir vos infos</legend>
          <!-- description du champs -->
      <label for="name">Nom</label>
      <!-- élément de formulaire -->
      <input type="text" name="txt_name" id="txt_name"  class="txt_name" >
      <!-- description du champs -->
      <label for="email">Courriel</label>
      <!-- élément de formulaire -->
      <input type="email" name="txt_email" id="txt_email"  class="txt_email" required>
       <!-- description du champs -->
      <label for="txt_pass1">Mot de passe</label>
      <!-- élément de formulaire -->
      <input type="password" id="txt_pass1" name="txt_pass1"  class="txt_pass1" required>
           <!-- description du champs -->
      <label for="txt_pass2">Confirmation de mdp</label>
      <!-- élément de formulaire -->
      <input type="password" id="txt_pass2" name="txt_pass2" class="txt_pass2"  required>
      <!-- bouton d'envoi de formulaire -->
      <button type="submit" id="btn_submit" name="btn_submit" class="btn_submit">Envoyer</button>
  </fieldset>  
</form>

Code CSS

.frm_test input {
    border: 2px solid black;
    border-radius: 4px;
    font-size: 1rem;
    margin: 0.25rem;
    min-width: 125px;
    padding: 0.5rem;
}
.frm_test input:valid{
    border-color: green;
}
.frm_test input.invalid {
    border-color: red;
}

Code JS

const FRM_TEST = document.getElementById("frm_test");
const TXT_EMAIL = document.getElementById("txt_email");
const TXT_PASS1 = document.getElementById("txt_pass1");
const TXT_PASS2 = document.querySelector("txt_pass2");
const BTN_SUBMIT = document.querySelector("btn_submit");
//on met dans un tableau 1 D TOUS les éléments du form
const FORM_ELEMENTS = document.querySelectorAll('input, select, textarea');
const INVALIDCLASSNAME = 'invalid';

FRM_TEST.onsubmit = validerFormulaire;
TXT_PASS2.onblur = validerConfirmationMotPasse;

//MODE EXPERT HERE
FORM_ELEMENTS.forEach(function (form_element) {
  form_element.addEventListener('invalid', function () {
    form_element.classList.add(INVALIDCLASSNAME);
  })
  form_element.addEventListener('input', function () {
    if (form_element.validity.valid) {
      form_element.classList.remove(INVALIDCLASSNAME);
    }
  })
})
//FIN MODE EXPERT HERE

function validerConfirmationMotPasse(){
  let estValide = false;

  if (TXT_PASS1.value != TXT_PASS2.value) {
    TXT_PASS2.classList.add(INVALIDCLASSNAME);
    console.log("Mauvaise confirmation de mot de passe");
  }else{
    TXT_PASS2.classList.remove(INVALIDCLASSNAME);
    estValide = true;
  }

  return estValide;
}

function validerFormulaire(e) {
  let nbChampsInvalides = 0;

  if(!validerConfirmationMotPasse()){
    nbChampsInvalides++;
  };

  if(nbChampsInvalides != 0) {
    e.preventDefault();
  } 
} 

Démonstration - Utilisation de validations JavaScript

See the Pen Cours 14 - Utilisation de validations JavaScript by Jimmy Gilbert (@coachtechno) on CodePen.

Ressources