Cómo Restringir Números en un Campo de Texto Específico de un Formulario WPForms

Los formularios son una parte fundamental de la interacción en línea con los usuarios. Sin embargo, a veces es necesario imponer ciertas restricciones en los datos que los usuarios pueden ingresar.

Una restricción común es evitar que se ingresen números en campos de texto específicos. En este artículo, aprenderemos cómo lograr esto en un formulario creado con WPForms.

Agregando el Fragmento de Código

Antes de comenzar, necesitarás agregar un fragmento de código a tu sitio web. Este fragmento de código se encargará de validar y restringir la entrada de números en un campo de texto específico. Si no estás familiarizado con la adición de fragmentos de código en tu sitio web, puedes consultar este tutorial proporcionado por WPForms para obtener orientación.

Una vez que estés listo para agregar el fragmento de código, sigue los pasos a continuación:

1. Abre el archivo functions.php de tu tema activo o utiliza un plugin como Code Snippets para agregar el código.
2. Copia y pega el siguiente fragmento de código en el archivo:

/**
* Disallow numbers in a single-line text field
*
* @link https://wpforms.com/developers/how-to-restrict-numbers-in-a-single-line-text-form-field/
*/

function wpf_dev_disallow_numbers_text_field( $fields, $entry, $form_data ) {

// Opcional: puedes limitar a formularios específicos. A continuación, restringimos la salida al ID de formulario #702.
if ( absint( $form_data[ 'id' ] ) !== 702 ) {
return $fields;
}

// Obtenemos el valor del campo específico y lo asignamos a una variable
// ID del campo: 2
$mystring = $fields[2][ 'value' ];

if (!preg_match ('/^([a-zA-Z]+)$/', $mystring)) 
{
// Verificamos el ID del campo 2 y mostramos un mensaje de error en la parte superior del formulario y debajo del campo específico.
wpforms()->process->errors[ $form_data[ 'id' ] ] [ '2' ] = esc_html__( 'El nombre de usuario solo puede contener letras.', 'plugin-domain' );
}

}

add_action( 'wpforms_process', 'wpf_dev_disallow_numbers_text_field', 10, 3 );

Personalizando el Código

Es importante tener en cuenta que este fragmento de código está diseñado para restringir la entrada de números en un campo de texto específico de un formulario WPForms. Aquí hay algunos aspectos que puedes personalizar según tus necesidades:

• ID del Formulario y del Campo: Asegúrate de reemplazar los números de identificación (702 y 2) con los ID de tu propio formulario y campo. Si necesitas ayuda para encontrar estos ID, consulta este tutorial proporcionado por WPForms.
• Mensaje de Error Personalizado: Puedes personalizar el mensaje de error que se muestra cuando se intenta ingresar un número en el campo de texto. Simplemente actualiza el texto dentro de la función esc_html__().

Con este fragmento de código en su lugar, tu formulario WPForms ahora restringirá la entrada de números en el campo de texto especificado, ayudando a garantizar que los usuarios ingresen la información correcta.

¿No te funciona el código anterior? Aquí tienes la razón y el código actualizado

A veces, puede suceder que el código proporcionado anteriormente no funcione según lo esperado. Aquí vamos a analizar por qué podría no estar funcionando correctamente y presentar una versión actualizada del código para abordar esos problemas.

Razón de las Fallas

El código original (analizado desde los recursos de wpforms) presentaba algunas deficiencias que podrían haber causado que no funcionara correctamente:

1. Expresión Regular Incorrecta: La expresión regular utilizada en el código original podría haber causado errores al validar si el campo contenía solo letras. Esto podría llevar a errores innecesarios incluso cuando el campo era válido.
2. Adición de Errores Incondicionalmente: El código original agregaba un mensaje de error sin verificar si el campo realmente contenía números. Esto podría resultar en mensajes de error incorrectos y evitar la presentación del formulario incluso cuando el campo era válido.
3. Eliminación de Errores Previos: No se estaba gestionando adecuadamente la eliminación de errores anteriores, lo que podría haber llevado a la persistencia de mensajes de error incorrectos y la prevención de la presentación del formulario.

Código Actualizado

Aquí está el código mejorado con explicaciones de los cambios realizados:

/**
* Disallow numbers in a single-line text field and allow form submission if valid.
*
* @link https://wpforms.com/developers/how-to-restrict-numbers-in-a-single-line-text-form-field/
*/

function wpf_dev_disallow_numbers_text_field( $fields, $entry, $form_data ) {

// Opcional: puedes limitar a formularios específicos. A continuación, restringimos la salida al ID de formulario #702.
if ( absint( $form_data[ 'id' ] ) !== 702) {
return $fields;
}

// Obtenemos el valor del campo específico y lo asignamos a una variable
// (asumiendo el ID del campo #2 aquí)
$mystring = $fields[2][ 'value' ];

// Solo agregamos un error si el valor contiene números
if ( preg_match('/\d/', $mystring) ) {
// Verificamos el ID del campo 2 y mostramos un mensaje de error en la parte superior del formulario y debajo del campo específico.
wpforms()->process->errors[ $form_data[ 'id' ] ] [ '2' ] = esc_html__( 'El nombre solo puede contener letras.', 'plugin-domain' );
} else {
// Si el valor contiene solo letras, permitimos la presentación del formulario
// eliminando cualquier error previo para este campo
unset(wpforms()->process->errors[ $form_data[ 'id' ] ] [ '2' ]);
}
}

add_action( 'wpforms_process', 'wpf_dev_disallow_numbers_text_field', 10, 3 );


Explicación de los Cambios

Aquí hay una explicación de los cambios realizados en el código actualizado:

1. Corrección de la Expresión Regular: El código original usaba !preg_match(‘/^([a-zA-Z]+)$/’, $mystring), lo que provocaba incorrectamente un error incluso cuando el campo solo contenía letras. El código corregido usa preg_match(‘/\d/’, $mystring) para detectar con precisión números dentro de la cadena.
2. Adición Condicional de Errores: Ahora, el código verifica si el campo contiene números antes de agregar un mensaje de error, lo que evita la adición de mensajes de error innecesarios.
3. Eliminación de Errores Previos: SSi el valor pasa la validación (contiene solo letras), el código elimina explícitamente cualquier error existente para ese campo usando unset(wpforms()->process->errors[ $form_data[ ‘id’ ] ] [ ‘7’ ]);. Esto asegura que ningún mensaje de error anterior impida el envío del formulario.

Con estos cambios, el código debería permitir la presentación del formulario cuando el campo contiene solo letras, mientras que aún previene la presentación y muestra un mensaje de error si hay números presentes.