Enhancing Elementor Forms with Custom Validation Code

Elementor Forms are versatile and easy to use, but sometimes, the default validation options are insufficient for unique requirements. Adding custom validation ensures better data accuracy and user experience. This guide demonstrates how to enhance your Elementor forms with both client-side (JavaScript) and server-side (PHP) validation.

Why Custom Validation?

Default validation in Elementor is useful but limited. Custom validation allows you to:

• Enforce specific rules (e.g., custom patterns for email or phone numbers).
• Validate data against external APIs.
• Add complex conditions for form submission.

Adding Custom Validation

Step 1: Adding JavaScript for Frontend Validation

Frontend validation occurs before the form is submitted. Use JavaScript to prevent users from submitting incorrect data.

Example: Validate a Custom Field for Alphabets Only

1. Add this JavaScript code to your site via a plugin like WPCode or your theme's customizer:

  
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('.elementor-form');
    if (form) {
        form.addEventListener('submit', function (event) {
            const customField = document.querySelector('input[name="custom_field"]');
            if (customField && !/^[a-zA-Z]+$/.test(customField.value)) {
                event.preventDefault();
                alert('Please enter alphabets only in the custom field.');
            }
        });
    }
});

Explanation:

• The script listens for the form’s submit event.
• It checks if the input in custom_field matches the alphabet pattern.
• If validation fails, form submission is prevented, and an alert is displayed.

Step 2: Adding PHP for Server-Side Validation

Server-side validation ensures that invalid data doesn't get saved, even if frontend validation is bypassed.

Example: Validate the Same Custom Field Server-Side

1. Add this PHP code to your theme’s functions.php file or a custom plugin:

  
add_action('elementor_pro/forms/new_record', function($record, $handler) {
    $raw_fields = $record->get('fields');
    $custom_field_value = $raw_fields['custom_field']['value'];

    if (!preg_match('/^[a-zA-Z]+$/', $custom_field_value)) {
        // Stop the form from being processed
        wp_die('Validation failed: Only alphabets are allowed in the custom field.');
    }
}, 10, 2);

Explanation:

• The action elementor_pro/forms/new_record triggers after the form submission.
• The code retrieves the custom_field value and checks it using a regex pattern.
• If validation fails, the submission is terminated, and an error message is displayed.

Testing and Debugging

1. Test on Staging Environment:

   • Never test custom validation directly on the live site.
   • Use a staging site to test thoroughly.

2. Use Debugging Tools:

   • Use browser developer tools (console) to debug JavaScript.
   • Enable WordPress debugging (WP_DEBUG) for PHP errors.

Adding custom validation to Elementor forms elevates their functionality, ensuring accurate data collection and a better user experience. By implementing both frontend and server-side validation, you can create robust forms tailored to your specific needs.