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

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>
```
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>
```
Ajouter required="required" à chaque champ de formulaire obligatoire
```
<input id="fname" name="fname" type="text" required="required" />
```
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 (v3.0.6+ et v3.1.0+ de la BOEW)	Syntaxe (v3.0.0 à v3.0.5 de la BOEW)
Adresse de courriel	`type="email"`	`type="email"`
Alphanumérique	`data-rule-alphanumeric:"true"`	`class="{validate:{alphanumeric:true}}"`
Chiffres seulement	`type="number"`	`type="number"`
Date	`type="date"`	`type="date"`
Date (ISO)	`type="date" data-rule-dateISO="true"`	`type="date" class="{validate:{dateISO:true}}"`
Heure	`type="time"`	`type="time"`
Lettres et des signes de ponctuation simples seulement (ponctuation qui est permis : [.])	`data-rule-letterswithbasicpunc="true"`	`class="{validate:{letterswithbasicpunc:true}}"`
Lettres seulement	`data-rule-lettersonly="true"`	`class="{validate:{lettersonly:true}}"`
Longeur entre x et y	`data-rule-rangelength="[x,y]"`	`class="{validate:{rangelength:[x,y]}}"`
Longeur maximum de x	`data-rule-maxlength="x"`	`class="{validate:{maxlength:x}}"`
Longeur minimum de x	`data-rule-minlength="x"`	`class="{validate:{minlength:x}}"`
Nombre maximum de x	`max="x"`	`max="x"`
Nombre minimum x	`min="x"`	`min="x"`
Numéro de téléphone (É.-U.)	`type="tel" data-rule-phoneUS="true"`	`type="tel" class="{validate:{phoneUS:true}}"`
URL (IPv4)	`type="url"`	`type="url"`
URL (IPv6)	`type="url" data-rule-ipv6="true"`	`type="url" class="{validate:{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 :

js/workers/formvalid.js - contient le JavaScript pour la validation de formulaires
js/sass/includes/_formvalid.scss - contient le CSS pour la validation de formulaires
js/dependencies/validate.js - fichier de script principal de jQuery Validation
js/dependencies/validateAdditional.js - méthodes de validation supplémentaires pour jQuery Validation
js/i18n/formvalid/ - fichiers d'internalisation pour jQuery Validation

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

jQuery Validation