Comment restreindre les caractères spéciaux dans un champ de formulaire ?

Vous avez déjà voulu éviter que ces caractères spéciaux gênants n'apparaissent dans certains champs de vos formulaires ? Vous en avez peut-être assez que les utilisateurs saisissent des emojis ou des symboles là où ils ne devraient pas se trouver. Dans ce guide, nous allons vous aider à utiliser JavaScript pour mettre un terme à ces caractères indésirables dans des champs tels que Texte à ligne unique et Paragraphe. Plongeons dans l'action et rendons vos formulaires un peu plus ordonnés !

Limiter les caractères spéciaux

Prêt à passer à l'action ? Commençons par intégrer ces extraits à votre site. Vous trouverez ci-dessous deux éléments de code : l'un pour bloquer les caractères spéciaux et l'autre pour empêcher les utilisateurs de coller dans les champs de formulaire.

Si vous ne savez pas comment ajouter ces snippets à votre site, ne vous inquiétez pas ! Nous vous avons préparé un tutoriel pratique sur l'ajout de PHP ou de JavaScript personnalisés pour WPForms. Consultez-le pour obtenir des conseils é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 la saisie d'aucun caractère spécial au clavier. La seconde fonction empêchera également toute fonction de saisie au clavier ou de collage par clic de souris dans ce champ.

Création du formulaire

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

Ajouter la classe CSS

Sélectionnez ensuite le champ que vous souhaitez restreindre. Cliquez sur Options de champ et sélectionnez Avancé.

Ajouter ensuite wpf-char-restrict à la Classes CSS (champ de formulaire). Vous devez répéter cette étape pour chaque champ de formulaire que vous souhaitez restreindre. Pour les besoins de cette documentation, nous allons l'ajouter à la fois au champ de formulaire Paragraphe et Texte sur une seule ligne champs.

Désormais, si l'utilisateur essaie de saisir des caractères spéciaux ou de coller quelque chose dans ces champs, il verra un message d'alerte s'afficher sur son écran.

Cet exemple montre un utilisateur qui tente d'insérer son adresse électronique dans le champ Commentaires.

Vous souhaitez également utiliser JavaScript pour restreindre la saisie semi-automatique d'adresses à un pays spécifique ? Jetez un coup d'œil à notre tutoriel sur Comment restreindre l'autocomplétion d'adresses à un pays spécifique.

Référence Action

wpforms_wp_footer_end