Souhaitez-vous empêcher les utilisateurs de saisir des chiffres dans vos champs de texte à ligne unique ? Bien que vous puissiez utiliser des masques de saisie pour limiter les champs aux caractères alpha, ce guide vous montrera comment créer une solution plus souple qui autorise les majuscules et les minuscules tout en bloquant les chiffres.
Dans ce tutoriel, nous vous montrerons l'extrait de code nécessaire pour restreindre les nombres dans ces champs.
Mise en place du formulaire
Tout d'abord, créez un nouveau formulaire et ajoutez un champ de texte à ligne unique que vous souhaitez restreindre. Dans 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'identifiant de votre formulaire et de votre champ, car vous en aurez besoin pour le code. Si vous ne savez pas comment trouver ces identifiants, consultez notre guide sur la recherche des identifiants de formulaire et de champ.
Ajout du code de validation
Ce code empêchera la soumission du formulaire si des nombres 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 :
- A la ligne 11: Remplacer 1000 par l'identifiant du formulaire
- A la ligne 17: Remplacez 25 par l'identifiant de votre champ
- À la ligne 22: remplacez 25 par l'identifiant du 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 mettre en place une validation en temps réel. Voici comment procéder :
Pour commencer, modifiez le formulaire et, lorsque le champ Texte à ligne unique est sélectionné, cliquez sur l'onglet Avancé, sous Options de champ, et ajoutez des numéros sans virgule au champ Classes CSS.
Ajoutez ensuite ce code JavaScript à votre site :
Une fois l'extrait ajouté, un message d'erreur s'affiche immédiatement pour avertir le visiteur de l'erreur de validation lorsqu'il clique sur la touche de tabulation ou sort du champ.
Référence Action
Vous souhaitez également empêcher la saisie de caractères spéciaux dans un champ de formulaire Texte à une ligne? Consultez le didacticiel intitulé Comment restreindre les caractères spéciaux dans un champ de formulaire.