Como Restringir Caracteres Especiais de um Campo de Formulário

Sempre quis impedir que esses caracteres especiais irritantes fossem inseridos em campos específicos dos seus formulários? Talvez esteja cansado de os utilizadores inserirem emojis ou símbolos onde não deveriam. Bem, neste guia, vamos mostrar-lhe como usar JavaScript para impedir a entrada desses caracteres indesejados em campos como Texto de Linha Única e Parágrafo. Vamos aprofundar e tornar os seus formulários um pouco mais organizados!

Restringir caracteres especiais

Pronto para agir? Em primeiro lugar, vamos adicionar estes trechos ao seu site. Abaixo, encontrará dois pedaços de código – um para impedir esses caracteres especiais irritantes e outro para impedir que os utilizadores colem em campos de formulário.

Se não tiver a certeza de como adicionar estes trechos ao seu site, não se preocupe! Temos um tutorial prático sobre como adicionar PHP ou JavaScript personalizado para o WPForms. Consulte-o para obter orientações 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 quaisquer caracteres especiais sejam inseridos a partir de um teclado. A segunda função impedirá também a colagem de qualquer teclado ou clique do rato neste campo.

Criar o seu formulário

Em seguida, crie o seu formulário e adicione os seus campos. Se precisar de alguma assistência na criação do seu formulário, consulte este tutorial útil.

Adicionar a Classe CSS

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

Em seguida, adicione wpf-char-restrict ao campo Classes CSS. Repetirá este passo para cada campo de formulário que deseje restringir. Para efeitos desta documentação, vamos adicioná-lo aos campos Parágrafo e Texto de Linha Única.

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

Este exemplo mostra um utilizador a tentar inserir o seu endereço de e-mail no campo Comentários.

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

Ação de Referência

wpforms_wp_footer_end