Como restringir o campo Telefone para aceitar apenas números

Gostaria de restringir o campo Telefone para aceitar apenas números? Por predefinição, os formatos Internacional e Telefone inteligente permitem a introdução de letras, mas falham na validação quando o utilizador sai do campo.

por defeito, o erro de validação do telefone é apresentado quando o utilizador sai do campo

Utilizando um pequeno trecho de código, é possível desativar facilmente a introdução de quaisquer caracteres do teclado, exceto se for um número. Isto significa que, se tentarem introduzir algo que não sejam números, o texto simplesmente não será introduzido, desactivando assim o campo até que seja introduzido um número.

Criar o formulário

Em primeiro lugar, terá de criar um novo formulário e adicionar os seus campos. Se precisar de ajuda para criar o seu formulário, consulte esta documentação.

crie o seu formulário e adicione os seus campos

Adicionar a classe CSS

Em seguida, é necessário adicionar uma classe CSS ao campo do formulário Telefone. Sempre que um campo Telefone com essa classe for usado, ele aceitará um valor numérico.

Ao adicionar esta classe CSS a qualquer campo de formulário que aceite as classes CSS, pode restringir esse campo para aceitar apenas números.

Para adicionar uma classe CSS, selecione o campo de formulário Telefone que adicionou ao seu formulário e, no separador Avançadas, adicione numbersOnly às Classes CSS.

adicionar a classe CSS de numbersOnly ao campo Phone

Restringir o campo do telefone apenas a números

Agora é altura de adicionar o snippet ao seu site que restringe o campo apenas para permitir números.

Se precisar de ajuda para adicionar snippets ao seu site, consulte 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 snippet procurará automaticamente qualquer campo de formulário com a classe CSS de numbersOnly e impedirá tudo, exceto a entrada da tecla 0-9.

E é tudo o que precisa para restringir o campo Telefone apenas a números! Gostaria de transformar o número de telefone dentro das notificações de e-mail num link? Veja o nosso tutorial sobre Como tornar os números de telefone um link nas notificações de e-mail.

Ação de referência

wpforms_wp_footer_end

FAQ

P: Como posso limitar o número de dígitos introduzidos?

R: Os formatos Smart e US para o campo do telefone já terão alguma validação para o número de dígitos introduzidos num número de telefone e falharão a apresentação do formulário se houver demasiados dígitos no campo.