I need to have a country specific phone number validation.

Developer Support CMS Development
,
1

So for example if I select country name in phone number field then if I enter phone number it should validate that specific country’s phone number format. For example, if I select India then it should allow 10 digits.

NMerai_0-1744186634476.png
NMerai_0-1744186634476.png283×103 4.71 KB

2

Hey, @NMerai :waving_hand: Are you tracking down help with custom coding? Or is this a product suggestion? I believe this could be accomplished with JS and a custom form by most developers. — Jaycee

3

Hi @Jaycee_Lewis thanks for the message, and it would be great if you could suggest the workaround because we are receiving incorrect phone numbers that we cannot use for further follow-up.

I tried with JS but it is not working as expected. I would appreciate it if you could guide me. If it has already been resolved then please direct me to the topic as I haven’t found it yet.

Thanks in advance! (:

4

Hi @NMerai,

Below is a sample of how your JS needs to look like in order to add custom validation to a HubSpot form.

This sets up the basics of listening to the HubSpot form load and identifying the necessary form fields (you may need to adjust the selectors if your property names are different):

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 const form = document.querySelector('form');
 const countryDropdown = form.querySelector('select[name="country"]');
 const phoneNumberField = form.querySelector('input[name="phone"]');

 }
});

With the above set up you can add your custom JS logic.

Here is a sample where the JS listens for the country dropdown change and updates the phone field validation dynamically. If the validation fails, then a span gets added with the appropriate error message.

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 const form = document.querySelector('form');
 const countryDropdown = form.querySelector('select[name="country"]');
 const phoneNumberField = form.querySelector('input[name="phone"]');

 // Create error span
 let errorSpan = document.createElement('span');
 errorSpan.className = 'phone-error';
 errorSpan.style.color = 'red';
 errorSpan.style.fontSize = '12px';
 phoneNumberField.insertAdjacentElement('afterend', errorSpan);

 // Add validation rules
 const validatePhoneNumber = (country, phone) => {
 if (country === 'USA') {
 return /^\d{10}$/.test(phone);
 } else if (country === 'India') {
 return /^\d{10}$/.test(phone);
 } else if (country === 'UK') {
 return /^07\d{9}$/.test(phone);
 }
 return true;
 };

 // Custom error messages
 const getErrorMessage = (country) => {
 switch (country) {
 case 'USA':
 return 'US phone number must be 10 digits.';
 case 'India':
 return 'Indian phone number must be 10 digits.';
 case 'UK':
 return 'UK phone number must be 11 digits starting with 07.';
 default:
 return '';
 }
 };

 // Validation function
 const handleValidation = () => {
 const selectedCountry = countryDropdown.value;
 const phoneNumber = phoneNumberField.value;
 const errorMessage = getErrorMessage(selectedCountry);

 if (!validatePhoneNumber(selectedCountry, phoneNumber)) {
 errorSpan.textContent = errorMessage;
 phoneNumberField.setCustomValidity(errorMessage);
 } else {
 errorSpan.textContent = '';
 phoneNumberField.setCustomValidity('');
 }
 };

 // Event listeners
 countryDropdown.addEventListener('change', handleValidation);
 phoneNumberField.addEventListener('input', handleValidation);
 }
});

This is just an example - you will need to test and tweak it to suit your needs (i.e. add other country options or update he validation messages).

Hope this helps!

5

Hi yes @Jaycee_Lewis ! @evaldas’s answer is helpful. Thanks a lot. And it would be great if you add this feature in your future updates, as well!

Thanks again!

6

Hey @NMerai

I totally get what you’re looking for, country-specific phone number validation can be super helpful, especially when you want to make sure the number format matches the country chosen. Here’s how you can set that up:

1. Use HubSpot’s Custom Form Fields (with Workarounds)
While HubSpot doesn’t have built-in support for country-specific phone number validation, you can get creative with custom properties and workflows. Here’s one way you can approach it:

    • Create a custom property where the user selects their country from a dropdown (e.g., India, USA, etc.).
    • Use Zapier or JavaScript to check if the number matches the correct format based on the country selected. For example, if “India” is selected, it would check that the phone number has exactly 10 digits.

2. Use Zapier and Numverify for Validation

For a more seamless solution, I’d recommend using Numverify to validate phone numbers. You can set up a workflow in Zapier where:

  • When a contact fills out the form, Zapier picks it up.
  • It checks the phone number with Numverify, which automatically validates based on the country code.
  • If the number doesn’t match the format (e.g., India requires 10 digits), it will flag it as invalid.

Here’s the guide on how to set up Numverify with Zapier: Numverify Zapier Integration.

3. JavaScript for Front-End Validation (Custom Code)

If you’re comfortable with a bit of custom code, you can add JavaScript to your forms to validate the phone number in real-time based on the country selected. This way, when someone selects a country (like India), the form can instantly validate that the number has the correct number of digits (like 10 for India).

Here’s a general idea of how it works:

  • Use a country dropdown field.
  • Based on the country, apply a specific validation pattern (e.g., 10 digits for India, 7 digits for the UK).
  • The form will throw an error if the number doesn’t match the correct length or format.

Let me know if you want more info on how to set this up, or if you’d like me to walk you through the process!

Cheers,

Aanchal