Como Restringir Caracteres Especiais de um Campo de Formulário

Sempre quis impedir que caracteres especiais indesejados fossem inseridos em campos específicos dos seus formulários? Talvez você esteja cansado de usuários inserindo emojis ou símbolos onde não deveriam. Bem, neste guia, vamos mostrar como usar JavaScript para impedir esses caracteres indesejados em campos como Texto de Linha Única e Parágrafo. Vamos lá e tornar seus formulários um pouco mais organizados!

Restringindo caracteres especiais

Pronto para agir? Primeiro, vamos adicionar esses trechos ao seu site. Abaixo, você encontrará dois trechos de código — um para impedir caracteres especiais indesejados e outro para impedir que os usuários colem em campos de formulário.

Se você não tem certeza de como adicionar esses trechos ao seu site, não se preocupe! Temos um tutorial útil sobre como adicionar PHP ou JavaScript personalizado para WPForms. Confira para obter orientação passo a passo.

/**
 * Restrict special characters from forms fields with special CSS class
 * Apply the class "wpf-char-restrict" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/
 */
 
function wpf_dev_char_restrict() {
?>
 
<script type="text/javascript">
     
    jQuery(function($){

        //Prevent any special characters in form fields with this CSS class name
        $( '.wpf-char-restrict' ).on( 'keypress', function(e){
             
			var regex = new RegExp("^[0-9a-zA-Z \b]+$");
			var key = String.fromCharCode(!event.charCode ? event.which: event.charCode);
			if (!regex.test(key)) 
				{
					alert ( "Special characters are not allowed in this field" ); // Put any message here
					event.preventDefault();
					return false;
				} 
        });
         
        //Prevent any paste features in form fields with this CSS class name
        $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
            var regex = new RegExp( "@" );
             
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
             
            if (!regex.test(key)) {
                alert ( "Pasting feature has been disabled for this field" ); // Put any message here
                e.preventDefault();
                return false;
            }
        });
         
    });
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

Na primeira função, não permitimos que nenhum caractere especial seja digitado pelo teclado. A segunda função impedirá a colagem de qualquer teclado ou clique do mouse neste campo também.

Criando seu formulário

Em seguida, crie seu formulário e adicione seus campos. Se precisar de alguma ajuda para criar seu formulário, por favor, confira este tutorial útil.

Adicionando a Classe CSS

Em seguida, selecione o campo que você deseja restringir. Clique em Opções de Campo e selecione Avançado.

Em seguida, adicione wpf-char-restrict ao campo Classes CSS. Você repetirá esta etapa para cada campo de formulário que deseja restringir. Para fins desta documentação, vamos adicioná-lo aos campos Parágrafo e Texto de Linha Única.

E agora, se o usuário tentar digitar caracteres especiais ou se tentar colar algo nesses campos, ele verá uma mensagem de alerta aparecer em sua tela.

Este exemplo mostra um usuário tentando inserir seu endereço de e-mail no campo Comentários.

Gostaria também de usar JavaScript para restringir a autocorreção de endereço a um país específico? Dê uma olhada em nosso tutorial sobre Como Restringir a Autocorreção de Endereço a um País Específico.

Ação de Referência

wpforms_wp_footer_end