// Add custom validation for Elementor form fields
function custom_elementor_form_validation($record, $ajax_handler) {
// Get the submitted form data
$form_data = $record->get(‘fields’);
// Custom error messages for each field
$error_messages = array(
‘name_id’ => ‘Please enter letters and spaces only for Name.’,
‘tel’ => ‘Please enter a valid 9-digit number starting with 9 for Tel.’,
‘iban’ => ‘Please enter 25 characters starting with “PT50” for IBAN.’,
);
// Validate each field and display custom error messages
foreach ($error_messages as $field_name => $error_message) {
if (isset($form_data[$field_name])) {
$field_value = $form_data[$field_name][‘value’];
// Define regular expression patterns for validation
$patterns = array(
‘name_id’ => ‘/^[A-Za-z ]+$/’,
‘tel’ => ‘/^9\d{8}$/’,
‘iban’ => ‘/^PT50.{21}$/’,
);
if (!preg_match($patterns[$field_name], $field_value)) {
// Field does not match the pattern, add a custom error message
$record->add_error($field_name, $error_message);
}
}
}
return $record;
}
// Hook the custom validation function to Elementor form submission
add_action(‘elementor_pro/forms/validation’, ‘custom_elementor_form_validation’, 10, 2);
// Modify the default Elementor error message
function custom_elementor_form_custom_error_message($message, $record, $ajax_handler) {
if ($record->status === \ElementorPro\Modules\Forms\Classes\Form_Record::STATUS_INVALID) {
// Replace this with your custom error message
$custom_error_message = ‘There are errors in your submission. Please correct them and try again.’;
return $custom_error_message;
}
return $message;
}
add_filter(‘elementor_pro/forms/validation_message’, ‘custom_elementor_form_custom_error_message’, 10, 3);
// Additional JavaScript for handling popups
function custom_elementor_form_error_message_script() {
?>
<script type=”text/javascript”>
jQuery(document).ready(function($) {
// Replace ‘your-popup-selector’ with the actual CSS selector for your popup
var popupSelector = ‘.provagratis2’;
// Replace ‘custom-error-message-selector’ with the CSS class or ID of your custom error message element
var customErrorMessageSelector = ‘.provagratis1’;
// Wait for the form widget to initialize within the popup
$(popupSelector).on(‘elementor/popup/show’, function() {
// Find and replace the error message element within your form
var $popup = $(popupSelector);
var $errorMessageElement = $popup.find(customErrorMessageSelector);
if ($errorMessageElement.length > 0) {
// Show/hide the custom error message based on the form status
if ($popup.find(‘.elementor-form’).hasClass(‘elementor-form-invalid’)) {
$errorMessageElement.show();
} else {
$errorMessageElement.hide();
}
}
});
});
</script>
<?php
}
add_action(‘wp_footer’, ‘custom_elementor_form_error_message_script’);