Come limitare il campo telefono ad accettare solo numeri

Desideri limitare il campo Telefono ad accettare solo numeri? Per impostazione predefinita, i formati telefonici Internazionale e Intelligente ti consentiranno di inserire lettere, ma falliranno la validazione quando esci dal campo.

Utilizzando un piccolo snippet di codice puoi facilmente impedire l'inserimento di qualsiasi carattere da tastiera, a meno che non sia un numero. Ciò significa che, se tentassero di digitare qualsiasi cosa diversa dai numeri, il testo semplicemente non verrebbe inserito, disabilitando così il campo finché non viene inserito un numero.

Creazione del modulo

Innanzitutto, dovrai creare un nuovo modulo e aggiungere i tuoi campi. Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questa documentazione.

Aggiunta della classe CSS

Successivamente, dovrai aggiungere una classe CSS al campo modulo Telefono. Ogni volta che viene utilizzato un campo Telefono con questa classe, accetterà solo valori numerici.

Per aggiungere una classe CSS, seleziona il campo modulo Telefono che hai aggiunto al tuo modulo e nella scheda Avanzate, aggiungi numbersOnly alle Classi CSS.

Limitare il campo telefono ai soli numeri

Ora è il momento di aggiungere lo snippet al tuo sito che limiterà il campo ad accettare solo numeri.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta questo tutorial.

/**
 * 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 );

Questo snippet cercherà automaticamente qualsiasi campo modulo con la classe CSS numbersOnly e impedirà l'inserimento di qualsiasi tasto diverso dai tasti 0-9.

E questo è tutto ciò che ti serve per limitare il campo Telefono ai soli numeri! Desideri rendere il numero di telefono all'interno delle notifiche email un link? Dai un'occhiata al nostro tutorial su Come rendere i numeri di telefono un link nelle notifiche email.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Come posso limitare il numero di cifre che inseriscono?

R: I formati Intelligente e US per il campo telefono avranno già una validazione per il numero di cifre inserite in un numero di telefono e la sottomissione del modulo fallirà se ci sono troppe cifre nel campo.