Validation des formulaires - nschonni/wet-boew GitHub Wiki
Ce composant fournit la validation générique et le soutien de message d'erreur générique pour les formulaires Web.
Chef du projet : Paul Jackson (@pjackson28)
- 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
- Formulaires Web
- 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 .... 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 :
| Type de validation | Syntaxe |
|---|---|
| Adresse de courriel | type="email" |
| Alphanumérique | class="{validate:{alphanumeric:true}}" |
| Chiffres seulement | type="number" |
| Date | type="date" |
| Date (ISO) | type="date" class="{validate:{dateISO:true}}" |
| Heure | type="time" |
| Lettres et des signes de ponctuation simples seulement (ponctuation qui est permis : [.]) | class="{validate:{letterswithbasicpunc:true}}" |
| Lettres seulement | class="{validate:{lettersonly:true}}" |
| Longeur entre x et y | class="{validate:{rangelength:[x,y]}}" |
| Longeur maximum de x | class="{validate:{maxlength:x}}" |
| Longeur minimum de x | class="{validate:{minlength:x}}" |
| Nombre maximum de x | max="x" |
| Nombre minimum x | min="x" |
| Numéro de téléphone (É.-U.) | type="tel" class="{validate:{phoneUS:true}}" |
| URL (IPv4) | type="url" |
| URL (IPv6) | type="url" class="{validate:{ipv6:true}}" |
Liser jQuery Validation Plugin - Documentation pour des renseignements supplémentaires.
La validation des formulaires est dépendent sur jQuery Validation (licence MIT, | 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 des formulaires est situé dans plusieurs endroits dans le dossier source de la BOEW :
- js/workers/formvalid.js - contient le JavaScript pour la validation des formulaires
- js/sass/includes/_formvalid.scss - contient le CSS pour la validation des 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]]
- Fournir seulement la validation de côté client pour les champs de formulaire peut permettre des assauts malveillants sur le serveur
- On ajoutera des exemples pour les boutons radio et les cases à cocher
- On utilisera data-* au lieu de class pour transmettre les paramètres complexes au composant