Cómo restringir caracteres especiales de un campo de formulario

¿Alguna vez ha querido mantener esos molestos caracteres especiales fuera de campos específicos en sus formularios? Tal vez estés cansado de que los usuarios introduzcan emojis o símbolos donde no deben. Bueno, en esta guía, te guiaremos a través del uso de JavaScript para poner fin a esos caracteres no deseados en campos como Texto de una línea y Párrafo. Sumerjámonos de lleno y hagamos que tus formularios estén un poco más ordenados.

Restricción de caracteres especiales

¿Listo para pasar a la acción? Lo primero es lo primero: pongamos 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 de formulario.

Si no está seguro de cómo agregar estos fragmentos a su sitio, ¡no se preocupe! Lo tenemos cubierto con un práctico tutorial sobre cómo agregar PHP o JavaScript personalizado para WPForms. Compruébelo usted mismo para una guía 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 permitiremos que se introduzca ningún carácter especial desde el teclado. La segunda función impedirá también cualquier función de pegar con el teclado o con el ratón en este campo.

Creación del formulario

A continuación, cree el formulario y añada los campos. Si necesitas ayuda para crear tu formulario, consulta este útil tutorial.

Añadir la clase CSS

A continuación, seleccione el campo que desea restringir. Haga clic en Opciones de campo y seleccione Avanzadas.

A continuación, añada wpf-char-restrict a la Clases de CSS campo. Repetirás este paso para cada campo de formulario que quieras restringir. Para el propósito de esta documentación, vamos a añadirlo tanto al campo Párrafo y Texto de una línea campos.

Y ahora, si el usuario intenta escribir caracteres especiales o si intenta pegar algo en estos campos, verá aparecer 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.

¿Le gustaría también utilizar JavaScript para restringir la función de autocompletar direcciones a un país específico? Eche un vistazo a nuestro tutorial sobre Cómo restringir la función de autocompletar direcciones a un país específico.

Acción de referencia

wpforms_wp_footer_end