Comment restreindre les caractères spéciaux d'un champ de formulaire

Vous avez toujours voulu empêcher ces caractères spéciaux gênants dans certains champs de vos formulaires ? Vous en avez peut-être marre que les utilisateurs saisissent des émojis ou des symboles là où ils ne devraient pas. Eh bien, dans ce guide, nous allons vous montrer comment utiliser JavaScript pour mettre fin à ces caractères indésirables dans des champs tels que Texte sur une seule ligne et Paragraphe. Plongeons et rendons vos formulaires un peu plus ordonnés !

Restreindre les caractères spéciaux

Prêt à passer à l'action ? Tout d'abord, ajoutons ces extraits à votre site. Ci-dessous, vous trouverez deux morceaux de code : l'un pour arrêter ces caractères spéciaux gênants et l'autre pour empêcher les utilisateurs de coller dans les champs du formulaire.

Si vous n'êtes pas sûr de la manière d'ajouter ces extraits à votre site, ne vous inquiétez pas ! Nous avons ce qu'il vous faut avec un tutoriel pratique sur l'ajout de PHP ou JavaScript personnalisé pour WPForms. Consultez-le pour obtenir des instructions étape par étape.

/**
 * Restrict special characters from forms fields with special CSS class
 * Apply the class "wpf-char-restrict" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/
 */
 
function wpf_dev_char_restrict() {
?>
 
<script type="text/javascript">
     
    jQuery(function($){

        //Prevent any special characters in form fields with this CSS class name
        $( '.wpf-char-restrict' ).on( 'keypress', function(e){
             
			var regex = new RegExp("^[0-9a-zA-Z \b]+$");
			var key = String.fromCharCode(!event.charCode ? event.which: event.charCode);
			if (!regex.test(key)) 
				{
					alert ( "Special characters are not allowed in this field" ); // Put any message here
					event.preventDefault();
					return false;
				} 
        });
         
        //Prevent any paste features in form fields with this CSS class name
        $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
            var regex = new RegExp( "@" );
             
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
             
            if (!regex.test(key)) {
                alert ( "Pasting feature has been disabled for this field" ); // Put any message here
                e.preventDefault();
                return false;
            }
        });
         
    });
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

Dans la première fonction, nous n'autorisons aucun caractère spécial à être saisi au clavier. La deuxième fonction empêchera également toute fonction de collage au clavier ou par clic de souris dans ce champ.

Création de votre formulaire

Ensuite, créez votre formulaire et ajoutez vos champs de formulaire. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter ce tutoriel utile.

Ajout de la classe CSS

Ensuite, sélectionnez le champ que vous souhaitez restreindre. Cliquez sur Options du champ et sélectionnez Avancé.

Ensuite, ajoutez wpf-char-restrict au champ Classes CSS. Vous répéterez cette étape pour chaque champ de formulaire que vous souhaitez restreindre. Aux fins de cette documentation, nous allons l'ajouter aux champs Paragraphe et Texte sur une seule ligne.

Et maintenant, si l'utilisateur essaie de taper des caractères spéciaux ou s'il essaie de coller quelque chose dans ces champs, un message d'alerte s'affichera sur son écran.

Cet exemple montre un utilisateur essayant d'insérer son adresse e-mail dans le champ Commentaires.

Souhaitez-vous également utiliser JavaScript pour restreindre l'autocomplétion d'adresses à un pays spécifique ? Consultez notre tutoriel sur Comment restreindre l'autocomplétion d'adresses à un pays spécifique.

Action de référence

wpforms_wp_footer_end