Résumé IA
Souhaitez-vous empêcher les utilisateurs de saisir des chiffres dans vos champs de texte sur une seule ligne ? Bien que vous puissiez utiliser des masques de saisie pour restreindre les champs aux caractères alphabétiques uniquement, ce guide vous montrera comment créer une solution plus flexible qui autorise les lettres majuscules et minuscules tout en bloquant les chiffres.
Dans ce tutoriel, nous vous montrerons l'extrait de code nécessaire pour restreindre les chiffres dans ces champs.
Configuration du formulaire
Tout d'abord, créez un nouveau formulaire et ajoutez un champ Texte sur une seule ligne que vous souhaitez restreindre. Pour notre exemple, nous l'utiliserons comme champ Nom d'utilisateur. Si vous avez besoin d'aide pour créer un formulaire, consultez notre guide sur la création de votre premier formulaire.
Notez l'ID de votre formulaire et l'ID de votre champ, car vous en aurez besoin pour le code. Si vous n'êtes pas sûr de la manière de trouver ces ID, veuillez consulter notre guide sur comment trouver les ID de formulaire et de champ.
Ajout du code de validation
Ce code empêchera la soumission du formulaire si des chiffres sont détectés dans le champ. Si vous avez besoin d'aide pour ajouter du code à votre site, veuillez consulter notre guide sur l'ajout de code personnalisé à un site WordPress.
Remplacez les valeurs suivantes dans le code PHP :
- À la ligne 11 : Remplacez 1000 par l'ID de votre formulaire
- À la ligne 17 : Remplacez 25 par l'ID de votre champ
- À la ligne 22 : Remplacez à nouveau 25 par l'ID de votre champ
Si le champ Nom d'utilisateur contient des chiffres lors de la soumission du formulaire, un message d'erreur apparaîtra et le formulaire ne sera pas soumis.
Option de validation en temps réel
Si vous préférez empêcher les utilisateurs de saisir des chiffres avant la soumission du formulaire, vous pouvez implémenter une validation en temps réel. Voici comment procéder :
Pour commencer, modifiez le formulaire et, avec le champ Texte sur une seule ligne sélectionné, cliquez sur l'onglet Avancé sous Options du champ et ajoutez no-numbers au champ Classes CSS.
Ensuite, ajoutez ce code JavaScript à votre site :
Une fois l'extrait ajouté, un message d'erreur immédiat s'affichera, alertant le visiteur de l'erreur de validation lorsqu'il quitte le champ en appuyant sur Tab ou en cliquant dessus.
Action de référence
Souhaitez-vous également empêcher la saisie de caractères spéciaux dans un champ de formulaire Texte sur une seule ligne ? Consultez le tutoriel sur Comment restreindre les caractères spéciaux d'un champ de formulaire.