Comment restreindre le champ Téléphone pour n'accepter que des chiffres

Souhaitez-vous restreindre le champ Téléphone pour n'accepter que des chiffres ? Par défaut, les formats International et Intelligent vous permettent de saisir des lettres, mais échoueront à la validation lorsque vous quitterez le champ.

En utilisant un petit extrait de code, vous pouvez facilement désactiver la saisie de tout caractère autre que des chiffres. Cela signifie que s'ils tentaient de taper autre chose que des chiffres, le texte ne serait tout simplement pas saisi, désactivant ainsi le champ jusqu'à ce qu'un chiffre soit saisi.

Création du formulaire

Tout d'abord, vous devrez créer un nouveau formulaire et ajouter vos champs. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Ajout de la classe CSS

Ensuite, vous devrez ajouter une classe CSS au champ de formulaire Téléphone. Chaque fois qu'un champ Téléphone avec cette classe est utilisé, il n'acceptera que des valeurs numériques.

Pour ajouter une classe CSS, sélectionnez le champ de formulaire Téléphone que vous avez ajouté à votre formulaire et, dans l'onglet Avancé, ajoutez numbersOnly aux Classes CSS.

Restreindre le champ téléphone aux chiffres uniquement

Il est maintenant temps d'ajouter l'extrait à votre site qui restreindra le champ pour n'autoriser que les chiffres.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * Restrict the Phone Field to Only Accept Numbers.
 *
 * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/
 */

function restrict_letters_in_phone_field( ) {
?>
	<script type="text/javascript">
		
		jQuery(document).ready(function () {    

			jQuery( '.numbersOnly' ).keypress(function (e) {   
 
				var charCode = (e.which) ? e.which : event.keyCode    
				if (String.fromCharCode(charCode).match(/[^0-9]/g))    
					return false;                        
			});    

		});   
 
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'restrict_letters_in_phone_field', 30 );

Cet extrait recherchera automatiquement tout champ de formulaire avec la classe CSS numbersOnly et empêchera toute saisie autre que les touches 0-9.

Et voilà tout ce dont vous avez besoin pour restreindre le champ Téléphone aux chiffres uniquement ! Souhaitez-vous faire du numéro de téléphone dans les notifications par e-mail un lien ? Consultez notre tutoriel sur Comment transformer les numéros de téléphone en liens dans les notifications par e-mail.

Action de référence

wpforms_wp_footer_end

FAQ

Q : Comment puis-je limiter le nombre de chiffres qu'ils saisissent ?

R : Les formats Intelligent et US pour le champ téléphone auront déjà une certaine validation sur le nombre de chiffres saisis dans un numéro de téléphone, et refuseront la soumission du formulaire s'il y a trop de chiffres dans le champ.