Cómo restringir caracteres especiales de un campo de formulario

¿Alguna vez has querido evitar que esos molestos caracteres especiales se introduzcan en campos específicos de tus formularios? Quizás estés cansado de que los usuarios introduzcan emojis o símbolos donde no deberían. Bueno, en esta guía, te mostraremos cómo usar JavaScript para poner fin a esos caracteres no deseados en campos como Texto de una sola línea y Párrafo. ¡Vamos a sumergirnos y hacer tus formularios un poco más ordenados!

Restringir caracteres especiales

¿Listo para pasar a la acción? Primero, vamos a colocar estos fragmentos en tu sitio. A continuación, encontrarás dos fragmentos de código: uno para detener esos molestos caracteres especiales y otro para evitar que los usuarios peguen en los campos del formulario.

Si no estás seguro de cómo añadir estos fragmentos a tu sitio, ¡no te preocupes! Tenemos un tutorial práctico sobre cómo añadir PHP o JavaScript personalizado para WPForms. Échale un vistazo para obtener instrucciones paso a paso.

/**
 * 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 );

En la primera función, no permitimos que se introduzcan caracteres especiales desde el teclado. La segunda función evitará que se peguen caracteres especiales, ya sea por teclado o por clic del ratón, en este campo.

Creación de su formulario

A continuación, crea tu formulario y añade los campos del formulario. Si necesitas ayuda para crear tu formulario, por favor, consulta este útil tutorial.

Añadir la clase CSS

A continuación, selecciona el campo que deseas restringir. Haz clic en Opciones de campo y selecciona Avanzado.

A continuación, añade wpf-char-restrict al campo Clases CSS. Repetirás este paso para cada campo del formulario que desees restringir. Para fines de esta documentación, lo añadiremos tanto al campo Párrafo como al de Texto de una sola línea.

Y ahora, si el usuario intenta escribir caracteres especiales o si intenta pegar algo en estos campos, verá un mensaje de alerta en su pantalla.

Este ejemplo muestra a un usuario intentando insertar su dirección de correo electrónico en el campo Comentarios.

¿Te gustaría también usar JavaScript para restringir la autocompletación de direcciones a un país específico? Echa un vistazo a nuestro tutorial sobre Cómo restringir la autocompletación de direcciones a un país específico.

Acción de referencia

wpforms_wp_footer_end