Ecommerce Shopify WordPress Discussion

Elementor Pro form field validation using patterns – trouble adding custom error message

I'm trying to add custom form field validation to our Elementor Pro forms to help ensure we have proper data hygiene. I found some lovely code which allows me to add a pattern field control to the backend - which works well. The only downside to this original code is that the error message for invalid input is that it only makes sense to developers (and maybe robots) because it echoes the validation pattern. I tried editing the code to add an additional field control for a custom error message that could be echoed, but I'm getting a syntax error from the function that should display the error message. Any help figuring out what I'm doing wrong would be appreciated (also if the code can be streamlined, that's cool too). I'm basically a monkey with a sledgehammer when it comes to coding. What I've tried so far: class Elementor_Forms_Patterns_Validation { public $allowed_fields = [ 'text', 'email', 'url', 'password', ]; public function __construct() { // Add pattern attribute to form field render add_filter( 'elementor_pro/forms/render/item', [ $this, 'maybe_add_pattern' ], 10, 3 ); add_action( 'elementor/element/form/section_form_fields/before_section_end', [ $this, 'add_pattern_field_control' ], 100, 2 ); add_action( 'elementor/element/form/section_form_fields/before_section_end', [ $this, 'add_validation_msg_field_control' ], 100, 2 ); } /* * add_pattern_field_control * @param $element * @param $args */ public function add_pattern_field_control( $element, $args ) { $elementor = \Elementor\Plugin::instance(); $control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'form_fields' ); if ( is_wp_error( $control_data ) ) { return; } // create a new pattern control as a repeater field $tmp = new Elementor\Repeater(); $tmp->add_control( 'field_pattern', [ 'label' => 'Pattern', 'inner_tab' => 'form_fields_advanced_tab', 'tab' => 'content', 'tabs_wrapper' => 'form_fields_tabs', 'type' => 'text', 'conditions' => [ 'terms' => [ [ 'name' => 'field_type', 'operator' => 'in', 'value' => $this->allowed_fields, ], ], ], ] ); $pattern_field = $tmp->get_controls(); $pattern_field = $pattern_field['field_pattern']; // insert new pattern field in advanced tab before field ID control $new_order = []; foreach ( $control_data['fields'] as $field_key => $field ) { if ( 'custom_id' === $field['name'] ) { $new_order['field_pattern'] = $pattern_field; } $new_order[ $field_key ] = $field; } $control_data['fields'] = $new_order; $element->update_control( 'form_fields', $control_data ); } /** * add_validation_msg_field_control * @param $element * @param $args */ public function add_validation_msg_field_control( $element, $args ) { $elementor = \Elementor\Plugin::instance(); $control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'form_fields' ); if ( is_wp_error( $control_data ) ) { return; } // create a new pattern control as a repeater field $tmp1 = new Elementor\Repeater(); $tmp1->add_control( 'field_validation_msg', [ 'label' => 'Validation Message', 'inner_tab' => 'form_fields_advanced_tab', 'tab' => 'content', 'tabs_wrapper' => 'form_fields_tabs', 'type' => 'text', 'conditions' => [ 'terms' => [ [ 'name' => 'field_type', 'operator' => 'in', 'value' => $this->allowed_fields, ], ], ], ] ); $validation_msg_field = $tmp1->get_controls(); $validation_msg_field = $validation_msg_field['field_validation_msg']; // insert new validation message field in advanced tab before field ID control $new_order = []; foreach ( $control_data['fields'] as $field_key => $field ) { if ( 'custom_id' === $field['name'] ) { $new_order['field_validation_msg'] = $validation_msg_field; } $new_order[ $field_key ] = $field; } $control_data['fields'] = $new_order; $element->update_control( 'form_fields', $control_data ); } public function maybe_add_pattern( $field, $field_index, $form_widget ) { if ( ! empty( $field['field_pattern'] ) && ( ! empty( $field['field_validation_msg'] ) && in_array( $field['field_type'], $this->allowed_fields ) ) { $form_widget->add_render_attribute( 'input' . $field_index, [ // Add pattern attribute 'pattern' => $field['field_pattern'], 'validation_msg' => $field['field_validation_msg'], // Add pattern to validation message 'oninvalid' => 'this.setCustomValidity( '$field['field_validation_msg']' )', // Clear validation message when needed 'oninput' => 'this.setCustomValidity("")', ] ); } return $field; } } new Elementor_Forms_Patterns_Validation();
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.