Cómo restringir el campo de teléfono para que solo acepte números

¿Te gustaría restringir el campo Teléfono para que solo acepte números? Por defecto, los formatos de teléfono Internacional y Smart te permitirán introducir letras, pero fallarán en la validación cuando salgas del campo.

Usando un pequeño fragmento de código puedes deshabilitar fácilmente que se introduzcan caracteres del teclado a menos que sean números. Esto significa que, si intentaran escribir cualquier cosa que no fueran números, el texto simplemente no se introduciría, deshabilitando así el campo hasta que se introdujera un número.

Creación del formulario

Primero, necesitarás crear un nuevo formulario y añadir tus campos. Si necesitas ayuda para crear tu formulario, consulta esta documentación.

Añadir la clase CSS

A continuación, necesitarás añadir una clase CSS al campo del formulario Teléfono. Siempre que se utilice un campo Teléfono con esta clase, solo aceptará un valor numérico.

Para añadir una clase CSS, selecciona el campo del formulario Teléfono que has añadido a tu formulario y, en la pestaña Avanzado, añade numbersOnly a las Clases CSS.

Restringir el campo de teléfono solo a números

Ahora es el momento de añadir el fragmento a tu sitio que restringirá el campo para permitir solo la entrada de números.

Si necesita ayuda para agregar fragmentos a su sitio, revise este 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 );

Este fragmento buscará automáticamente cualquier campo del formulario con la clase CSS numbersOnly y evitará la entrada de cualquier tecla que no sea del 0 al 9.

¡Y eso es todo lo que necesitas para restringir el campo Teléfono a solo números! ¿Te gustaría hacer que el número de teléfono dentro de las notificaciones por correo electrónico sea un enlace? Echa un vistazo a nuestro tutorial sobre Cómo hacer que los números de teléfono sean un enlace en las notificaciones por correo electrónico.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Cómo puedo limitar el número de dígitos que introducen?

R: Los formatos Smart y US para el campo de teléfono ya tendrán cierta validación para el número de dígitos introducidos en un número de teléfono, y la presentación del formulario fallará si hay demasiados dígitos en el campo.