Cómo restringir el campo Teléfono para que sólo acepte números

¿Desea restringir el campo Teléfono para que sólo acepte números? Por defecto, los formatos Internacional y Smart phone te permitirán introducir letras, pero fallarán en la validación cuando salgas del campo.

se mostrará un error de validación del teléfono por defecto al salir del campo con el tabulador

Utilizando un pequeño fragmento de código puede deshabilitar fácilmente cualquier carácter del teclado a menos que sea un número. Esto significa que si intentan escribir cualquier cosa que no sean números, el texto simplemente no se introducirá, desactivando así el campo hasta que se introduzca un número.

Creación del formulario

En primer lugar, tendrá que crear un nuevo formulario y añadir sus campos. Si necesitas ayuda para crear tu formulario, consulta esta documentación.

cree su formulario y añada sus campos

Añadir la clase CSS

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

Añadiendo esta clase CSS a cualquier campo de formulario que acepte las clases CSS, puedes restringir ese campo para que sólo acepte números.

Para añadir una clase CSS, seleccione el campo de formulario Teléfono que ha añadido a su formulario y en la pestaña Avanzado, añada numbersOnly a las Clases CSS.

añadir la clase CSS de numbersOnly al campo Teléfono

Restringir el campo de teléfono sólo a números

Ahora es el momento de añadir el fragmento a su sitio que restringiría el campo sólo para permitir números.

Si necesitas ayuda para añadir snippets a tu sitio, consulta 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 de código buscará automáticamente cualquier campo de formulario con la clase CSS numbersOnly e impedirá cualquier entrada que no sea 0-9.

Y eso es todo lo que necesita para restringir el campo Teléfono sólo a números. ¿Quiere hacer que el número de teléfono dentro de las notificaciones por email sea un enlace? Eche 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 alguna validación para el número de dígitos introducidos en un número de teléfono, y fallará el envío del formulario si hay demasiados dígitos en el campo.