Come limitare i caratteri speciali da un campo modulo

Hai mai voluto impedire a quei fastidiosi caratteri speciali di finire in campi specifici dei tuoi moduli? Forse sei stanco che gli utenti inseriscano emoji o simboli dove non dovrebbero. Bene, in questa guida, ti mostreremo come usare JavaScript per bloccare quei caratteri indesiderati in campi come Testo a riga singola e Paragrafo. Immergiamoci e rendiamo i tuoi moduli un po' più ordinati!

Limitare i caratteri speciali

Pronto ad agire? Prima di tutto, inseriamo questi snippet sul tuo sito. Di seguito troverai due pezzi di codice: uno per bloccare quei fastidiosi caratteri speciali e un altro per impedire agli utenti di incollare nei campi del modulo.

Se non sei sicuro di come aggiungere questi snippet al tuo sito, non preoccuparti! Abbiamo una utile guida su come aggiungere PHP o JavaScript personalizzato per WPForms. Consultala per una guida passo 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 );

Nella prima funzione, non consentiamo l'inserimento di alcun carattere speciale dalla tastiera. La seconda funzione impedirà anche l'incollaggio tramite tastiera o clic del mouse in questo campo.

Creazione del tuo modulo

Successivamente, crea il tuo modulo e aggiungi i campi del modulo. Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questa utile guida.

Aggiunta della classe CSS

Successivamente, seleziona il campo che desideri limitare. Fai clic su Opzioni campo e seleziona Avanzate.

Successivamente, aggiungi wpf-char-restrict al campo Classi CSS. Ripeterai questo passaggio per ogni campo del modulo che desideri limitare. Ai fini di questa documentazione, lo aggiungeremo sia ai campi Paragrafo che Testo a riga singola.

E ora, se l'utente tenta di digitare caratteri speciali o se tenta di incollare qualcosa in questi campi, vedrà apparire un messaggio di avviso sullo schermo.

Questo esempio mostra un utente che tenta di inserire il proprio indirizzo email nel campo Commenti.

Desideri anche utilizzare JavaScript per limitare l'autocompletamento dell'indirizzo a un paese specifico? Dai un'occhiata al nostro tutorial su Come limitare l'autocompletamento dell'indirizzo a un paese specifico.

Azione di riferimento

wpforms_wp_footer_end