Form validation is an essential aspect of web development that empowers developers to enforce specific rules and maintain data integrity. By implementing a series of checks, form validation ensures that the information submitted by users adheres to predefined criteria.
Elementor Pro, a powerful website builder, offers an array of invaluable tools for form validation, making the process seamless and efficient. Whether it’s confirming that required fields are filled, validating email addresses, or validating URL domains.
Form validation
After the forms module is loaded and it’s a POST request with the form action, this is the perfect opportunity to implement form validation handlers to ensure that the data submitted by the user is accurate, secure, and meets the specified criteria.
Form validation is a crucial step in web development, as it helps prevent invalid or malicious data from being processed and ensures a smooth user experience.
Here are some examples:
- Required Fields: Ensure that all necessary fields are filled out by the user. Required fields are those that must be completed before the form can be submitted. If any required field is missing, display an error message prompting the user to fill it in.
- ReCAPTCHA: For forms that require additional security against bots and automated submissions, consider integrating Google’s reCAPTCHA or similar technologies to verify that the form is being submitted by a real human.
- Email Format Validation: Check whether the data entered in specific fields matches the required format. For instance, if you have an email input field, verify that the value entered follows a valid email format.
You can add the code below to your themes functions.php file.
Example: /wp-content/themes/your-active-theme/functions.php
// Validate EMAIL field for Elementor Pro forms
function elementor_form_email_field_validation( $field, $record, $ajax_handler ) {
// Validate email format
if ( ! is_email( $field['value'] ) ) {
$ajax_handler->add_error( $field['id'], esc_html__( 'Invalid email address, it must be in xx@xx.xx format.', 'textdomain' ) );
return;
}
// List of disallowed domains
$disallowed_domains = array(
'example.com',
'test.com',
'google.com'
);
// Extract the domain from the email
$email_parts = explode( '@', $field['value'] );
$domain = strtolower( end( $email_parts ) );
// Check if the email domain is disallowed
if ( in_array( $domain, $disallowed_domains ) ) {
$disallowed_domains_list = implode( ', ', $disallowed_domains );
$error_message = sprintf( esc_html__( 'Emails from certain domains are not allowed.', 'textdomain' ));
$ajax_handler->add_error( $field['id'], $error_message );
return;
}
}
add_action( 'elementor_pro/forms/validation/email', 'elementor_form_email_field_validation', 10, 3 );
- URL Format Validation: Check whether the data entered matches the required format. For example, if you have an URL input field, verify that the value entered follows a valid URL format.
You can add the code below to your themes functions.php file.
Example: /wp-content/themes/your-active-theme/functions.php
// Validate URL field for Elementor Pro forms
function elementor_form_url_field_validation( $field, $record, $ajax_handler ) {
$url = $field['value'];
// Validate URL format
if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
$ajax_handler->add_error( $field['id'], esc_html__( 'Invalid URL format. Please enter a valid URL.', 'textdomain' ) );
return;
}
// List of disallowed domains
$disallowed_domains = array(
'example.com',
'test.com',
'google.com'
);
// Extract the domain from the URL
$parsed_url = parse_url( $url );
$domain = strtolower( $parsed_url['host'] );
// Check if the URL domain is disallowed
if ( in_array( $domain, $disallowed_domains ) ) {
$disallowed_domains_list = implode( ', ', $disallowed_domains );
$error_message = esc_html__( 'Certain domains are not allowed.', 'textdomain' );
$ajax_handler->add_error( $field['id'], $error_message );
return;
}
}
add_action( 'elementor_pro/forms/validation/url', 'elementor_form_url_field_validation', 10, 3 );
In this example, we have defined an array $disallowed_domains that contains the list of domains that are not allowed. If the domain extracted from the email matches any of the domains in this list, we display an error message indicating that emails or a URL from those domains are not allowed on the form.
Examples Output
Once you’ve added the code, test your forms thoroughly to ensure that the custom validation works as expected and displays the error message for disallowed domains. If you encounter any issues, double-check the code for any typos or syntax errors.
