Como restringir caracteres especiais de um campo de formulário

Alguma vez quis manter aqueles caracteres especiais incómodos fora de campos específicos nos seus formulários? Talvez esteja cansado de ver os utilizadores introduzirem 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 mergulhar e tornar seus formulários um pouco mais organizados!

Restrição de caracteres especiais

Pronto para entrar em ação? Antes de mais, vamos colocar estes snippets no seu site. Abaixo, encontrará duas partes de código - uma para impedir aqueles caracteres especiais irritantes e outra para impedir que os utilizadores colem nos campos de formulário.

Se não tem a certeza de como adicionar estes 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. 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 estamos a permitir que sejam introduzidos quaisquer caracteres especiais a partir de um teclado. A segunda função também impedirá quaisquer funções de teclado ou de colar com o clique do rato neste campo.

Criar o seu formulário

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

Adicionar a classe CSS

Em seguida, selecione o campo que pretende restringir. Clique em Opções de campo e selecione Avançadas.

Em seguida, adicione wpf-char-restrict para o Classes CSS campo. Repetirá este passo para cada campo de formulário que pretende restringir. Para efeitos desta documentação, vamos adicioná-lo a ambos os campos Parágrafo e Texto de uma linha campos.

E agora, se o utilizador tentar introduzir caracteres especiais ou se tentar colar algo nestes campos, verá aparecer uma mensagem de alerta no seu ecrã.

Este exemplo mostra um utilizador a tentar inserir o seu endereço de correio eletrónico no campo Comentários.

Também gostaria de utilizar JavaScript para restringir o preenchimento automático de endereços a um país específico? Veja o 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