Validar campos de formularios en Elementor

Elementor Pro siempre es buena opción si uno quiere contar con una suite casi completa para diseñar un sitio web y contar con funcionalidades básicas para necesidades primordiales del proceso. Si aún no lo tienes puedes pasar por aquí.

Uno de los widgets más importantes es el de formularios o llamado también Elementor Forms.

Elementor Forms nos permite generar formularios bastante rápidos y funcionales para diferentes necesidades, además los "Actions after submit" (acciones después de presionar el botón de enviar) son bastante útiles y lo mejor de todo que pueden combinarse, es decir puedes agregar a una persona a una lista de correos, enviar un mensaje al administrator y otro al que envió el formulario, enviar un webhook a Zapier u otro servicio similar y al final redirigir al usuario a una página de agradecimiento.

Sin embargo, hay un problema si deseas hacer formulario para uso serio. No hay validaciones realmente útiles en los mismos.

¿Cómo? Elementor solo tiene una validación básica por frontend usando matches y required en los campos. Alguien usando el Inspector de Elementos de cualquier navegador puede modificar el código y enviar cualquier información sin ser validada como corresponde.

Algunas personas también optan por librería en Javascript puro o jQuery para validar los formularios, pero eso da otro problema que es agregar un peso adicional al que ya tiene Elementor y sus librerías. Y desactivando Javascript todas esas validaciones se van a la borda.

¿Hay alguna solución?

Sí, las validaciones por backend. Al hacerlo de esta forma, el usuario final por más que utilice el inspector o desactive javascript igual los datos se validarán.

Elementor Forms cuenta con unos hooks que permite realizar la validación por backend y devolver los mensajes de error en tiempo real por Ajax.

¿Cómo se implementa?

Debes crear un plugin o editar el archivo functions.php de tu tema (te recomiendo trabajar haciendo un child theme) para agregar estas validaciones.

Ya, pero, ¿Cuál es el código?

Lo tienes a continuación:

Validación de emails

La validación que viene por defecto en Elementor básicamente busca una arroba (@) y un punto (.), cosa que no ayuda mucho a tener emails válidos.

Colocando el siguiente código vas a tener una validación mucho más certera:

 
<?php add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) { if ( !filter_var( $field['value'], FILTER_VALIDATE_EMAIL ) ) { $ajax_handler->add_error( $field['id'], 'Ingresa un email válido.' ); } }, 10, 3 );

Validación por ID del campo

Cada campo en Elementor Forms cuenta con un ID que podemos personalizar. Gracias a ello, podemos hacer una validación general en todos los forms de nuestro sitio donde los campos tengan el mismo ID.

Primero, agregaremos esta función que permite obtener un campo por el ID ingresado.

 
// Esta función permite obtener un campo por ID, si no existe devuelve FALSE function rnz_elementor_get_field( $id, $record ) { $fields = $record->get_field( [ 'id' => $id, ] ); if ( empty( $fields ) ) { return false; } return current( $fields ); }

Como segundo paso, creamos la función donde validaremos los campos. Esto es referencial, puedes modificarlo a tus necesidades.

 
function rnz_elementor_forms_validation( $record, $ajax_handler ) { // Valida que el campo de política de privacidad esté marcado. // Esto es útil para cuando quieres agregar notificaciones personalizadas if( $field = rnz_elementor_get_field( 'politica_privacidad', $record ) ) { if( $field['value'] != 'on' ){ $ajax_handler->add_error( $field['id'], 'Debes aceptar las políticas para enviar el formulario.' ); } } // ELimina los espacios antes y después del texto, si lo hubiera y verifica que no sea una entrada vacía. if( $field = rnz_elementor_get_field( 'nombre', $record ) ) { if( $field['required'] == 'yes' ){ if( empty( trim($field['value']) ) ){ // Verifica si es vacío $ajax_handler->add_error( $field['id'], 'Por favor ingresa tu nombre.' ); } else if( 2 >= strlen(trim($field['value'])) ){ $ajax_handler->add_error( $field['id'], 'Tu nombre debe tener al menos 3 dígitos.' ); } } } if( $field = rnz_elementor_get_field( 'edad', $record ) ) { if( $field['required'] == 'yes' ){ if( empty( trim($field['value']) ) ){ $ajax_handler->add_error( $field['id'], 'Por favor ingresa tu edad.' ); } else if( filter_validate( trim($field['value']), FILTER_VALIDATE_INT ) ){ $ajax_handler->add_error( $field['id'], 'Solo se aceptan números para tu edad.' ); } } } }

Por último, debemos agregar la acción para que todo esto funcione.

 
add_action( 'elementor_pro/forms/validation', 'rnz_elementor_forms_validation', 10, 2 );

Y tú, ¿Sabías que se podía hacer esto? ¿En qué lo usarás?