Modèles de validation personnalisés pour les champs de texte

A champ de texte Le système accepte tout ce que les utilisateurs saisissent, mais des formats spécifiques sont parfois requis. Les URL de sites web, les codes produits, les numéros de licence ou les noms composés uniquement de lettres doivent respecter des règles de validation. Les modèles de validation personnalisés vous permettent de définir précisément le format acceptable et de détecter les erreurs avant l'envoi.

Ce guide vous apprendra comment ajouter des modèles de validation personnalisés aux champs de texte de vos formulaires WordPress.

Que sont les modèles de validation ?

Le Concept

Les modèles de validation sont des règles qui définissent quelles entrées sont valides :

• « Doit contenir uniquement des lettres »
• « Doit être une URL valide »
• « Doit correspondre au format ABC-1234 »
• «Doit comporter exactement 10 caractères»

Comment fonctionnent-ils

1. L'utilisateur saisit du texte dans le champ de texte
2. Lors de la soumission (ou pendant la saisie), les données sont comparées à un modèle.
3. Si la correspondance est réussie : la validation est réussie.
4. Si ce n'est pas le cas : un message d'erreur s'affiche.

Avantages sociaux

• Qualité des données: Assurez-vous de formats cohérents
• Prévention des erreurs : Détecter les erreurs tôt
• Guide de l'utilisateur : Des attentes claires
• Compatibilité en aval : Les données fonctionnent avec d'autres systèmes

Modèles de validation intégrés

Générateur de formulaires automatiques comprend des modèles communs :

Utilisation des modèles intégrés

Étape 1 : Ajouter un champ de texte

1. Ouvrez votre formulaire dans AFB
2. Faites glisser Texte champ à former
3. Cliquez pour configurer

Étape 2 : Sélectionner le modèle de validation

1. Trouvez Modèle de validation dans les paramètres
2. Choisissez dans le menu déroulant :
   • Aucun (pas de modèle)
   • Email
   • URL
   • Lettres seulement
   • Numéros seulement
   • Alphanumérique
   • Encadrement Sur Mesure
3. Enregistrer les paramètres

Étape 3 : Validation des tests

1. Formulaire d'aperçu
2. Essayez une entrée valide — ça devrait réussir
3. Saisissez une entrée invalide ; une erreur devrait s'afficher.

Exemples de modèles et cas d'utilisation

Validation d'URL

Utiliser pour:

• Champ du site Web
• Liens vers le portefeuille
• Profils de médias sociaux
• URL de référence

Exemples valides :

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Exemples invalides :

• exemple.com (protocole manquant)
• www.example.com (protocole manquant)
• juste du texte

Lettres seulement

Utiliser pour:

• Prénom/nom (validation simple)
• Noms de ville
• Codes pays
• Identifiants alphabétiques

Exemples valides :

• John
• Smith
• New York

Exemples invalides :

• John123
• New York (espace)
• O'Brien (apostrophe)

À noter: L'utilisation exclusive de lettres est stricte. Veuillez vérifier si vous avez besoin d'espaces, de traits d'union ou d'accents.

Numéros seulement

Utiliser pour:

• Numéros d'identification
• Numéros de compte
• Quantité (lorsqu'aucun champ numérique n'est utilisé)
• Codes PIN

Exemples valides :

• 12345
• 00123
• 9876543210

Exemples invalides :

• 123-456 (trait d'union)
• 123.45 (décimal)
• 12345A

Alphanumérique

Utiliser pour:

• Codes produit
• Numéros de référence
• Nom d'utilisateur
• Les numéros de série

Exemples valides :

• ABC123
• User42
• PROD001

Exemples invalides :

• ABC-123 (trait d'union)
• ABC 123 (espace)
• ABC_123 (souligné)

Modèles de validation personnalisés (Regex)

Qu'est-ce que Regex?

Les expressions régulières (regex) sont des modèles qui décrivent les formats de texte :

• ^ = Début de la chaîne
• $ = Fin de la chaîne
• [A-Z] = N'importe quelle lettre majuscule
• [a-z] = Toute lettre minuscule
• [0-9] = N'importe quel chiffre
• {3} = Exactement 3 des précédents
• {2,5} = Entre 2 et 5 des précédents
• + = Un ou plusieurs
• * = Zéro ou plus
• ? = Facultatif (zéro ou un)

Création de motifs personnalisés

1. Sélectionnez « Personnalisé » dans la liste déroulante de validation
2. Saisissez votre expression régulière
3. Test avec différentes entrées

Exemples courants de modèles personnalisés

Code postal américain

Motif: ^\d{5}(-\d{4})?$

Valide :

• 12345 (5 chiffres)
• 12345-6789 (code postal + 4)

Rejette :

• 1234 (trop court)
• 123456 (trop long)
• ABCDE (lettres)

Numéro de téléphone aux États-Unis

Motif: ^\d{3}-\d{3}-\d{4}$

Valide : 555-123-4567

Pour un format flexible : ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Valide :

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Code produit (format ABC-1234)

Motif: ^[A-Z]{3}-\d{4}$

Valide :

• ABC-1234
• XYZ-9999
• PRO-0001

Rejette :

• abc-1234 (minuscules)
• AB-1234 (seulement 2 lettres)
• ABC1234 (trait d'union manquant)

Plaque d'immatriculation (formats variés)

Modèle (États-Unis général) : ^[A-Z0-9]{1,7}$

Valide : 1 à 7 lettres majuscules/chiffres

Carte de crédit (format de base)

Motif: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Valide :

• 1234567890123456
• 1234 5678 9012 3456
• 1234 5678 9012-3456

À noter: Pour les paiements effectifs, utilisez des processeurs de paiement appropriés avec leur système de validation.

Nom d'utilisateur (Lettres, Chiffres, Tiret bas)

Motif: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Règles :

• Commence par la lettre
• 3 à 20 caractères au total
• Lettres, chiffres et tirets bas uniquement.

Valide : utilisateur_123, JohnDoe, test42

Code couleur hexadécimal

Motif: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Valide :

• # FF5733
• #fff
• #ABC123

Date (AAAA-MM-JJ)

Motif: ^\d{4}-\d{2}-\d{2}$

Valide : 2026-01-15

À noter: Pour les dates, il est généralement préférable d'utiliser un champ Date avec un sélecteur de date.

Heure (HH:MM 24 heures)

Motif: ^([01]\d|2[0-3]):[0-5]\d$

Valide :

• 09:30
• 14:45
• 23:59

Numéro de facture (INV-YYYY-NNNN)

Motif: ^INV-\d{4}-\d{4}$

Valide :

• INV-2026-0001
• INV-2025-1234

Numéro de sécurité sociale (États-Unis)

Motif: ^\d{3}-\d{2}-\d{4}$

Valide : 123-45-6789

Mise en garde: Soyez prudent lors de la collecte des numéros de sécurité sociale – implications en matière de sécurité et de confidentialité.

Créer ses propres modèles

Processus étape par étape

1. Définir les exigences : De quel format avez-vous besoin ?
2. Décomposez-le : Quels personnages, combien, et dans quel ordre ?
3. Modèle de construction : Traduire en expression régulière
4. Testez minutieusement : Entrées valides ET invalides
5. Message d'erreur : Aider les utilisateurs à comprendre le format

Exemple : ID de l’employé

Exigence: 2 lettres + 4 chiffres + 1 lettre (ex. : AB1234C)

Panne:

• 2 lettres majuscules : [A-Z]{2}
• 4 chiffres : \d{4}
• 1 lettre majuscule : [A-Z]
• Rien avant ni après : ^ et $

Modèle final : ^[A-Z]{2}\d{4}[A-Z]$

Modèles de test

Avant utilisation dans le formulaire :

• Test des entrées valides (devrait réussir)
• Test des entrées invalides (devrait échouer)
• Test des cas limites (frontières, caractères spéciaux)
• Utilisez des testeurs d'expressions régulières en ligne pour déboguer

Messages d'erreur pour la validation

Messages par défaut

• «Veuillez saisir une valeur valide»
• « Ce champ est invalide »

Messages personnalisés améliorés

Indiquez aux utilisateurs le format attendu :

Utilisation du texte d'espace réservé et d'aide

Évitez les erreurs en affichant le format dès le départ :

• Espace réservé: « ABC-1234 »
• Texte d'aide : « Saisissez votre code produit (par exemple, ABC-1234) »

Pratiques d'excellence

1. Commencez simplement

Utilisez les modèles intégrés lorsque c'est possible. Les expressions régulières personnalisées ajoutent de la complexité.

2. Ne survalidez pas

Des modèles trop stricts frustrent les utilisateurs :

• Noms avec traits d'union (Marie-Jeanne)
• Noms avec apostrophes (O'Brien)
• Personnages internationaux (José, Müller)

3. Afficher le format attendu

Indiquez toujours aux utilisateurs ce que vous attendez d'eux :

• Espace réservé avec exemple
• Texte d'aide expliquant le format
• Effacer le message d'erreur

4. Test des cas limites

• Entrée vide
• Espaces au début/à la fin
• Caractères spéciaux
• Longueur maximale

5. Envisagez des alternatives

Parfois, d'autres approches sont meilleures :

• Dates → Utiliser le champ Date
• Nombres → Utiliser le champ Nombre
• Téléphone → Utiliser le champ Téléphone avec le format
• Options fixes → Utiliser le menu déroulant

Combinaison avec d'autres validations

Modèle + Obligatoire

• Le champ doit être rempli ET correspondre au modèle
• Échec de la fonction vide « obligatoire »
• Format incorrect, modèle d'échec

Motif + Longueur min/max

• Le modèle valide le format
• La longueur confirme la taille
• Les deux doivent réussir

Modèles de dépannage

Le motif ne fonctionne pas

Vérifier:

• La syntaxe est correcte (aucune faute de frappe).
• Les caractères spéciaux ont été correctement échappés.
• Ancres ^ et $ si nécessaire

Entrée valide rejetée

Vérifier:

• Le modèle est peut-être trop strict.
• Caractères valides manquants dans le modèle
• Problèmes de sensibilité à la casse

Entrée invalide acceptée

Vérifier:

• Le patron est peut-être trop lâche.
• Ancres manquantes (^ et $)
• Testez avec plus d'exemples

Questions fréquemment posées

Puis-je combiner plusieurs motifs ?

Chaque champ utilise un seul modèle. Pour une validation complexe, combinez les exigences dans une seule expression régulière en utilisant l'alternative (|) ou créez le modèle pour correspondre à toutes les exigences.

Les modèles sont-ils sensibles à la casse ?

Par défaut, oui. Utilisez [A-Za-z] pour prendre en compte les deux majuscules et les minuscules, ou ajoutez l'option d'insensibilité à la casse si elle est prise en charge.

Comment puis-je insérer des espaces ?

Ajoutez \s à votre classe de caractères : [A-Za-z\s] correspond aux lettres et aux espaces.

Qu’en est-il des caractères internationaux ?

L'alphabet standard [A-Za-z] n'inclut pas les caractères accentués. Pour les noms internationaux, envisagez une validation moins stricte ou utilisez \p{L} (si pris en charge) pour n'importe quelle lettre.

Dois-je valider lors de la perte de focus ou soumettre ?

Les deux méthodes fonctionnent. La détection de flou (perte de mise au point) offre un retour d'information plus rapide. La capture de toutes les données lors de la soumission du formulaire prend en compte toutes les données. De nombreux formulaires utilisent les deux.

Résumé

Ajout de modèles de validation personnalisés :

1. Choisissez le type de motif – Intégré ou personnalisé
2. Modèle de configuration – Sélectionnez ou saisissez une expression régulière
3. Ajouter un espace réservé – Afficher le format attendu
4. Ajouter du texte d'aide – Expliquer les exigences
5. Définir le message d'erreur – Correction du guide
6. Testez minutieusement – Entrées valides et invalides

Conclusion

Les modèles de validation personnalisés garantissent la qualité des données en imposant des formats spécifiques. Qu'il s'agisse de validation d'URL, de codes produits ou d'identifiants personnalisés, ces modèles détectent les erreurs avant la soumission et guident les utilisateurs vers une saisie correcte.

Générateur de formulaires automatiques Il inclut les formats courants (e-mail, URL, lettres, chiffres, alphanumériques) et prend en charge les expressions régulières personnalisées pour des besoins de validation spécifiques. Des données propres commencent par une validation adéquate.

Prêt à valider les données de votre formulaire ? Télécharger Auto Form Builder et assurez-vous que vos formulaires recueillent des données correctement formatées.