Skip to main content

Form Validation

Description

Note : BETA - La documentation complète et les fichiers pour cet item seront ajoutés graduellement d'ici avril 2022.

Validation lightweigth pour formulaires Front-end (vous devriez toujours valider vos formulaires côté serveur lors de la soumission!).

Avantages :

  • Utilise les data attributes, donc aucune influence sur votre markup HTML
  • Retourne une valeur de validation quand l'utilisateur écrit et une autre lors du focus out / submission.
  • Plug and play avec n'importe quel formulaire, sous condition que ce soit votre markup.

Demo

Congrats, your form has been sent!
Oh, something went wront, please contact us!
Demo: Champ validé (alpha-extended, min:3, max:18), mais NON requis
Hey lad, your name must be all letters (Sorry 6lack! Love your music tho!) and the length between 4 and 7 characters.
Demo: Champ validé (email) et requis
Forgot something? Not really a good Email!
Demo: Champ validé (url) et requis
Sorry bro, not a good URL.
Demo: Champ validé (alphanumeric, min:5, max:6) et requis
Another error? Not a good Zip Code for god sake.
Demo: Champ validé (numeric) et requis
Not a number...Fix your keybord or I dunno, do something man!
Demo: Champ NON validé et NON requis
Demo: Champ requis
Select something.
Choose what you like*
Demo: Champ requis
Choose your favorite language*
Demo: Champ requis
Silence is nice, but please, turn on the radio!

Documentation

Importez la fonction dans votre projet

import { FormValidation } from "./functions/validation.js"

Instance et initialisation

Votre élément est la balise form. Idéalement, utilisez un ID. Inspectez l'exemple ci-dessous si vous avez des questions ou regardez la structure HTML dans le fichier de template.

const myForm = new FormValidation("#demo-form", {
  emptyValues: ["default"] // example only, remove if not needed
})

// init your newly created instance
myForm.init()

Exemple de markup pour un champ

{# only add the data attributes needed #}
<div class="form__field-wrapper" 
   data-validate 
   data-validate-format="alpha-extended"
   data-required
   data-validate-min="3"
   data-validate-max="18"
>
   <label class="form__label-title" for="name">
      <span>Name</span>
      {# the colored bullet when typing - can be anything #}
      <span class="bullet-typing-validation"></span>
   </label>
   <input class="form__input" type="text" id="name" name="name">
   {# the div for the error message #}
   <div data-validate-error>Your name must be all letters with a length between 4 and 7 characters.</div>
</div>

Data attributes possibles pour valider un champ

1. À ajouter sur un div qui wrap votre champ.

Pour que le champ soit pris en compte par le validateur

  • data-validate
Pour valider le format
  • data-validate-format (phone, email, alpha, alpha-extended, numeric, alphanumeric, alphanumeric-extended, url). Vous pouvez en ajouter dans validators.js
Pour valider qu'il n'est pas vide
  • data-required
Pour valider la longueur
  • data-validate-min
  • data-validate-max


2. À ajouter sur un div à l'intérieur de votre wrapper initial.

  • data-validate-error (avec le message d'erreur)

Arguments - Options

  • Name
    Type
    Default
    Description
  • emptyValues
    array
    []
    Array de valeurs que vous souhaitez que le validateur considère vide. Exemple : "default" pour un select.