Elementor form validation not working

The Elementor plugin is a popular tool for creating custom layouts and forms in WordPress. However, there may be instances where the form validation feature of Elementor is not working as expected. In such cases, you can use custom code to implement form validation in Elementor forms.

To achieve form validation in Elementor, you can utilize the elementor_pro/forms/validation filter hook. This hook allows you to add custom validation rules to Elementor forms.

Here’s an example code snippet that demonstrates how to add a custom validation rule to an Elementor form:

/**
 * Custom validation rule for Elementor form.
 *
 * @param array $result The validation result.
 * @param array $values The form field values.
 * @param array $module The Elementor form module.
 * @return array The modified validation result.
 */
function wpsnippets_elementor_form_validation( $result, $values, $module ) {
    // Perform your custom validation here
    if ( empty( $values['your_field_name'] ) ) {
        $result['your_field_name'] = 'Please enter a value.';
    }

    return $result;
}
add_filter( 'elementor_pro/forms/validation', 'wpsnippets_elementor_form_validation', 10, 3 );

In the above code, we define a custom validation rule using the wpsnippets_elementor_form_validation function. Inside the function, you can perform your custom validation logic. In this example, we check if the field with the name 'your_field_name' is empty and add an error message to the validation result if it is.

To use this code snippet, replace 'your_field_name' with the actual name of the field you want to validate. You can add additional validation rules by checking other form fields and modifying the validation result accordingly.

By adding this code snippet to your theme’s functions.php file or a custom plugin, you can implement custom form validation in Elementor forms.

Examples

Example 1: Custom JavaScript Validation for Elementor Form

This example demonstrates how to implement custom JavaScript validation for an Elementor form. By using the elementorProFrontend JavaScript object, we can add custom validation rules to the form fields.

(function($) {
    $(document).on('elementorProFrontend:afterInit', function() {
        var form = $('.elementor-form');

        form.on('submit', function(e) {
            var isFormValid = true;

            form.find('.elementor-field-group').each(function() {
                var field = $(this),
                    input = field.find('.elementor-field');

                if (input.val() === '') {
                    field.addClass('elementor-field-group-invalid');
                    isFormValid = false;
                } else {
                    field.removeClass('elementor-field-group-invalid');
                }
            });

            if (!isFormValid) {
                e.preventDefault();
            }
        });
    });
})(jQuery);

In this code example, we listen for the elementorProFrontend:afterInit event to ensure that Elementor Pro has been fully initialized. Then, we select the form using the .elementor-form class and attach a submit event handler. Inside the event handler, we iterate over each form field and check if it is empty. If any field is empty, we add the elementor-field-group-invalid class to its parent container and prevent the form submission.

Example 2: Server-side Validation using WordPress Hooks

This example demonstrates how to perform server-side validation for an Elementor form using WordPress hooks. By utilizing the elementor_pro/forms/validation filter, we can add custom validation logic to the form submission process.

function wpsnippets_elementor_form_validation( $is_valid, $record, $ajax_handler ) {
    $form_data = $record->get( 'form_data' );

    if ( empty( $form_data['your_field_name'] ) ) {
        $is_valid = false;
        $ajax_handler->add_error( 'your_field_name', 'Please fill in the required field.' );
    }

    return $is_valid;
}
add_filter( 'elementor_pro/forms/validation', 'wpsnippets_elementor_form_validation', 10, 3 );

In this code example, we define a custom validation function wpsnippets_elementor_form_validation that accepts three parameters: $is_valid (current validation status), $record (form submission record), and $ajax_handler (AJAX handler object). Inside the function, we retrieve the form data and check if the required field (your_field_name) is empty. If it is empty, we set $is_valid to false and add an error message using the $ajax_handler->add_error() method. Finally, we return the updated validation status.

Example 3: Custom Error Messages for Elementor Form Fields

This example demonstrates how to customize the error messages displayed for specific form fields in an Elementor form. By using the elementor_pro/forms/validation_messages filter, we can modify the default error messages.

function wpsnippets_elementor_form_validation_messages( $messages ) {
    $messages['your_field_name']['required'] = 'Please provide a value for the custom field.';

    return $messages;
}
add_filter( 'elementor_pro/forms/validation_messages', 'wpsnippets_elementor_form_validation_messages' );

In this code example, we define a custom filter function wpsnippets_elementor_form_validation_messages that accepts the default validation messages as an argument. Inside the function, we modify the error message for the your_field_name field and set it to a custom message. Finally, we return the updated messages array.