Validation de formulaires

Aperçu

Chef du projet : Paul Jackson (@pjackson28)

Objet

Ce composant fournit la validation générique et le soutien de message d'erreur générique pour les formulaires Web.

Avantages

  • Plusieurs méthodes de validation
  • Messages d'erreur personnalisés
  • Conformes à WCAG 2.0 AA
  • Recours aux WAI-ARIA pour accroître l'accessibilité
  • Approche d'amélioration progressive

Utilisation recommandée

Formulaires Web

Mise en œuvre

  1. Ajouter class="wet-boew-formvalid" à l'élément div qui est à l'entour de lélément form 
    <div class="wet-boew-formvalid"><form action="#" method="post">...</form></div>
  2. Facultatif : Entourer le nom de chaque champ de formulaire avec <span class="field-name">...</span>. Ceci spécifie le préfixe pour chaque message d'erreur. 
    <label for="fname"><span class="field-name">Prénom</span> <strong>(obligatoire)</strong></label>
  3. Ajouter required="required" à chaque champ de formulaire obligatoire 
    <input id="fname" name="fname" type="text" required="required" />
  4. Facultatif : Pour les champs de saisie, ajouter la syntaxe suivante pour la validation spécializée :

Note : La syntaxe de validation spécialisée a changé en v3.0.6 et v3.1.0 de class="{validate: {propriété: valeur}}" à data-rule-propriété="valeur". L'ancienne syntaxe est obsolète mais sera soutenue pour l'instant pour accommoder la transition vers la nouvelle syntaxe.

Type de validation Syntaxe
Adresse de courriel type="email"
Alphanumérique data-rule-alphanumeric:"true"
Chiffres seulement type="number"
Date type="date"
Date (ISO) type="date" data-rule-dateISO="true"
Heure type="time"
Lettres et des signes de ponctuation simples seulement (ponctuation qui est permis : [.]) data-rule-letterswithbasicpunc="true"
Lettres seulement data-rule-lettersonly="true"
Longeur entre x et y data-rule-rangelength="[x,y]"
Longeur maximum de x data-rule-maxlength="x"
Longeur minimum de x data-rule-minlength="x"
Nombre maximum de x max="x"
Nombre minimum x min="x"
Numéro de téléphone (É.-U.) type="tel" data-rule-phoneUS="true"
URL (IPv4) type="url"
URL (IPv6) type="url" data-rule-ipv6="true"

Liser jQuery Validation Plugin - Documentation (Anglais seulement) pour des renseignements supplémentaires.

Exemples

Développement

La validation de formulaires est dépendent sur jQuery Validation (Anglais seulement) (licence MIT (Anglais seulement), licence GPL). Elle est aussi améliorer par le correctif de sélecteur de date et le système de grille CSS.

Le code pour la validation de formulaires est situé dans plusieurs endroits dans le dossier source de la BOEW :

Problèmes connus

  • Fournir seulement la validation de côté client pour les champs de formulaire peut permettre des assauts malveillants sur le serveur

Historique des versions

Pages reliés

Références