How To Set “Validation” Phone Number By Country Code In Elementor Form

What Is Validation?

The validation for an input field refers to the process of ensuring that the input field entered by the user in a form field is valid and follows the specific formatting rules based on the specific requirements.

Why Is Important To Set Validation?

Setting validation for phone numbers in Elementor Form or any form on your website is important for several reasons:

  1. Data Accuracy: Validation ensures that the phone numbers entered by users are accurate and correctly formatted. It helps prevent typographical errors, missing digits, or invalid characters. By enforcing validation, you can maintain data integrity and ensure that the phone numbers collected through your forms are valid and usable.

  2. User Experience: Validating phone numbers enhances the user experience by providing real-time feedback. When a user enters an incorrect or improperly formatted phone number, validation can display an error message or visual indicator, allowing them to correct the mistake immediately. This saves time and frustration by avoiding form submission errors and subsequent correction cycles.

  3. Communication Efficiency: Having correctly formatted and validated phone numbers is essential for effective communication. Whether you plan to use the collected phone numbers for SMS notifications, phone calls, or contact purposes, ensuring the accuracy of the data helps prevent failed communication attempts due to incorrect or invalid phone numbers.

  4. Consistency and Standardization: Validation allows you to enforce a specific format or structure for phone numbers. This is particularly useful when dealing with international phone numbers and varying country codes. By standardizing the format, you can ensure consistency across your data, making it easier to process, store, and use the phone numbers in your systems.

  5. Data Integrity and Filtering: Validating phone numbers helps filter out spam or fake submissions. It adds an additional layer of protection against bots or malicious attempts to submit false or invalid information. By validating phone numbers, you can reduce the risk of collecting unreliable or fraudulent data.

How To Set “Validation” Phone Number By Country Code In Elementor Form

Below Are The Following Steps :

Step 1 : Login to your Server Access

Step 2 : Find child theme functions.php

Step 3 : Insert the code below

add_action( ‘elementor_pro/forms/validation/tel’, function( $field, $record, $ajax_handler )
{ if ( preg_match( ‘/^(+?6?01)[02-46-9]-[0-9]{7}$|^(+?6?01)[1]-[0-9]{8}$/’, $field[‘value’] ) !== 1 )
{ $ajax_handler->add_error( $field[‘id’], ‘Please enter a valid Malaysian phone number in the format +601XXXXXXXX or 01X-XXXXXXXX.’ ); }
}, 10, 3 );

Description Of The Code

  1. The add_action() function is used to register a callback function to be executed when the ‘elementor_pro/forms/validation/tel’ action is triggered. This action specifically targets the validation of telephone fields in Elementor forms.

  2. The callback function is defined using an anonymous function (a function without a name) that accepts three parameters: $field, $record, and $ajax_handler. These parameters are used to access information about the form field, the form record, and the AJAX handler respectively.

  3. The preg_match() function is used to perform a regular expression match on the value entered in the telephone field ($field[‘value’]). The regular expression pattern used is /^(+?6?01)[02-46-9]-[0-9]{7}$|^(+?6?01)[1]-[0-9]{8}$/.

  4. If the regular expression match returns a value other than 1, it means that the entered phone number does not match the specified pattern. In this case, the callback function proceeds to add an error message to the AJAX handler using $ajax_handler->add_error(). The error message is defined as ‘Please enter a valid Malaysian phone number in the format +601XXXXXXXX or 01X-XXXXXXXX.’.

  5. The 10 in the add_action() function represents the priority of the action. Lower numbers have higher priority, so 10 means that this validation function will be executed relatively early in the validation process.

  6. The 3 in the add_action() function represents the number of parameters that the callback function accepts ($field, $record, and $ajax_handler).
Scroll to Top