Bootstrap 4 : les formulaires 2/2

image_pdfimage_print

On a vu dans le précédent chapitre comment construire un formulaire. Nous allons voir à présent un aspect un peu plus dynamique parce qu’un formulaire est par définition censé être soumis et il peut y avoir des problèmes de validation.

La validation du navigateur

La validation côté client doit être considérée comme cosmétique parce qu’elle ne présente aucune sécurité. Mais elle permet d’éviter des va et vient avec le serveur en créant un premier filtre de saisie.

Validation par défaut

Depuis HTML5 les navigateurs offrent certaines capacités de validation des entrées de formulaire côté client :

  • avec l’attribut required pour rendre une saisie obligatoire,
  • en utilisant une expression régulière avec l’attribut pattern,
  • en imposant une plage de saisie avec les attributs min, max, maxlength
  • en imposant un type d’entrée avec l’attribut type

Les possibilités sont vastes et intéressantes surtout que tout est automatique ! Voyons un exemple :

<form>
  <div class="form-group">
    <label for="nom">Nom</label>
    <input type="text" class="form-control" id="nom" placeholder="Nom" required>
  </div>
  <div class="form-group">
    <label for="prenom">Prénom</label>
    <input type="text" class="form-control" id="prenom" placeholder="Prénom" required>
  </div>
  <div class="form-group">
    <label for="prenom">Age</label>
    <input type="number" class="form-control" id="age" value="20" min="20" max="80" required>
  </div>
  <button class="btn" type="submit">Envoyer</button>
</form>

Dans ce formulaire on a 3 champs de saisie. les deux premiers sont de type texte et le troisième de type numérique avec une plage de valeurs. D’autre part les 3 sont à saisie obligatoire avec l’attribut required.

Sur Firefox le formulaire se présente ainsi :

On voit que le troisième champ s’est adapté avec des petits boutons pour faire défiler les valeurs.

Si on ne renseigne pas un champ le navigateur nous en informe à la soumission :

De même si le type de donnée n’est pas correct :

Ou si on sort de la plage de valeurs :

On ne peut pas changer l’apparence de ces messages, juste le texte, mais pour cela il faut un peu de Javascript. Comme ce n’est pas le sujet de ce cours je ne développe pas cet aspect.

Validation personnalisée

Si la validation par défaut ne vous convient pas vous pouvez facilement la personnaliser. Pour cela il faut désactiver la validation automatique du navigateur en ajoutant l’attribut novalidate dans la balise form :

<form novalidate>

Maintenant on peut soumettre le formulaire avec toutes les erreurs qu’on veut, le navigateur ne se plaint plus !

Il faut utiliser du Javascript pour effectuer un traitement grâce à l’API de contrainte de validation (HTML5 constraint validation API). Cette API est un ensemble de propriétés et de méthodes pour chaque élément d’un formulaire. La principale méthode est checkValidity qui nous permet de savoir si l’entrée est valide.

On trouve dans la documentation de Bootstrap un script de base. On va donc adapter notre formulaire en conséquence pour créer une validation personnalisée :

<div class="container">
  <br>
  <form id="form" novalidate>
    <div class="form-group">
      <label for="nom">Nom</label>
      <input type="text" class="form-control" id="nom" placeholder="Nom" required>
      <div class="invalid-feedback">
        Veuillez entrer un nom
      </div>
    </div>
    <div class="form-group">
      <label for="prenom">Prénom</label>
      <input type="text" class="form-control" id="prenom" placeholder="Prénom" required>
      <div class="invalid-feedback">
        Veuillez entrer un prénom
      </div>
    </div>
    <div class="form-group">
      <label for="prenom">Age</label>
      <input type="number" class="form-control" id="age" value="20" min="20" max="80" required>
      <div class="invalid-feedback">
        Veuillez entrer un nombre compris entre 20 et 80
      </div>
    </div>
    <button class="btn" type="submit">Envoyer</button>
  </form>
</div>
<script>
(function() {
  "use strict"
  window.addEventListener("load", function() {
    var form = document.getElementById("form")
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add("was-validated")
    }, false)
  }, false)
}())
</script>

On peut se demander pourquoi l’exemple n’utilise pas jQuery qui est de toute façon pratiquement toujours mis en œuvre quand on met en place Bootstrap. Voici ce que ça donne avec jQuery :

$(function () {
  $('form').submit(function(event) {
    if (this.checkValidity() == false) {
      event.preventDefault()
      event.stopPropagation()
    }
    $(this).addClass("was-validated")
  })
})

On voit qu’on intercepte la soumission et qu’on vérifie la validité du formulaire avec la méthode checkValidity. D’autre part on ajoute la classe was-validated pour activer les textes des erreurs équipés de la classe invalid-feedback.

Maintenant on voit apparaître nos messages personnalisés :

Comment sont différenciés les entrées valides et invalides ?

Le navigateur nous le dit en ajoutant la pseudo classe :valid ou :invalid à chaque champ. Les règles de style de Bootstrap font le reste !

Validation côté serveur

Une validation sécurisée s’effectue toujours côté serveur. Dans ce cas on va renvoyer tout le code du formulaire en cas d’erreur de saisie. Il suffit d’ajouter les classes :

  • is-valid pour les champs valides
  • is-invalid pour les champs non valides

Et évidemment de prévoir le texte du message que pour les champs non valides. On pourrait ainsi recevoir ce code suite à une soumission :

<form id="form" novalidate>
  <div class="form-group">
    <label for="nom">Nom</label>
    <input type="text" class="form-control is-valid" id="nom" placeholder="Nom" value="Dupont" required>
  </div>
  <div class="form-group">
    <label for="prenom">Prénom</label>
    <input type="text" class="form-control is-invalid" id="prenom" placeholder="Prénom" required>
    <div class="invalid-feedback">
      Veuillez entrer un prénom
    </div>
  </div>
  <div class="form-group">
    <label for="prenom">Age</label>
    <input type="number" class="form-control is-valid" id="age" value="20" min="20" max="80" required>
  </div>
  <button class="btn" type="submit">Envoyer</button>
</form>

Avec cet aspect :

Conclusion

On peut effectuer la validation d’un formulaire côté client en choisissant :

  • la validation par défaut du navigateur
  • une validation personnalisée

On peut aussi effectuer la validation côté serveur et renvoyer tout le code du formulaire avec le renseignement des erreurs.

Laisser un commentaire