Como restringir caracteres especiais de um campo de formulário

Sempre quis manter aqueles caracteres especiais incômodos fora de campos específicos em seus formulários? Talvez você esteja cansado de ver os usuários inserindo emojis ou símbolos onde não deveriam estar. Bem, neste guia, vamos orientá-lo no uso do JavaScript para acabar com esses caracteres indesejados em campos como Texto de linha única e Parágrafo. Vamos nos aprofundar e tornar seus formulários um pouco mais organizados!

Restrição de caracteres especiais

Pronto para entrar em ação? Para começar, vamos colocar esses snippets em seu site. Abaixo, você encontrará dois trechos de código: um para impedir aqueles caracteres especiais incômodos e outro para impedir que os usuários colem nos campos de formulário.

Se não tiver certeza de como adicionar esses snippets ao seu site, não se preocupe! Nós o ajudamos com um tutorial prático sobre como adicionar PHP ou JavaScript personalizado para WPForms. Dê uma olhada nele 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 estamos permitindo que nenhum caractere especial seja inserido pelo teclado. A segunda função também impedirá qualquer função de teclado ou de colar com o clique do mouse nesse campo.

Criando seu formulário

Em seguida, crie seu formulário e adicione seus campos de formulário. Se precisar de ajuda para criar o formulário, consulte este útil tutorial.

Adição da classe CSS

Em seguida, selecione o campo que deseja restringir. Clique em Field Options e selecione Advanced.

Em seguida, adicione wpf-char-restrict para o Classes CSS campo. Você repetirá essa etapa para cada campo de formulário que deseja restringir. Para fins desta documentação, vamos adicioná-lo a ambos os campos Parágrafo e Texto de linha única campos.

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

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

Você também gostaria de usar JavaScript para restringir o preenchimento automático de endereços a um país específico? Dê uma olhada em nosso tutorial sobre Como restringir o preenchimento automático de endereços a um país específico.

Ação de referência

wpforms_wp_footer_end