Phone field validation – need international support (+ and variable length)

Hello,

I’m using s2Member Pro and I created a custom registration field for phone number . The problem is that the built-in validation forces exactly 10 digits , which only works for US numbers.

In my case, users can register from different countries (Brazil, Europe, etc.), so I need the phone field to:

  • Accept variable length (not only 10 digits).
  • Accept the “+” sign at the beginning for international dialing codes.
  • Ideally allow common characters like spaces, hyphens, and parentheses.

I already tried changing the field type in General Options → Registration/Profile Fields , but it still validates against the 10-digit US pattern. I also tried overriding with a custom regex in PHP, but the JavaScript validation on the frontend keeps blocking submissions.

:point_right: Question:
Is there a recommended way in s2Member to make the phone field validation more flexible (international format)?
Maybe through a hook/filter, or by disabling the default phone validation rule?

Any guidance or example code would be very much appreciated.

Thank you!
Jónior de Faria Antunes

Great question! I’ll have to look into that… Phone format validation can get complex to cover all countries.

What I’d probably do in your case is just set it to “anything goes” and then use custom JS for it if you want to add your own validation.

:slight_smile:

2 Likes

I agree with @clavaque, this is the technique is use for UK postcodes.

First I put the following on the “Other Attributes: (optional)” attribute

oninput="S2_formatUKPostcode(this);"

Then I add the following to my templates functions.php

function theme_enqueue_styles()
{
        // only include the following on certain pages
        if (is_page('856') || is_page('53'))
        {
?>
    <script>
        function S2_formatUKPostcode(input) {
    // Remove non-alphanumeric characters, convert to uppercase, and limit to first 7 characters
    let value = input.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase().slice(0, 7);

    if (value.length >= 5) {
        // Take first 4 characters as outward code, rest as inward code
        let outward = value.slice(0, 4);
        let inward = value.slice(4);
        input.value = `${outward} ${inward}`;
    } else {
        // If fewer than 5 characters, return as is (no space)
        input.value = value;
    }
        }
    </script>
<?php
        }
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

This formats the users input as they are entering it and should be easy enough for you to customise for your needs.

Lastly “don’t let perfect be the enemy of good”. It’d probably be quite easy to write a JS function that will work for almost all reasonable inputs but might take absolutely forever to write something that is 100% perfect.

2 Likes

Thanks for the guidance! I tried a couple of JavaScript approaches but couldn’t get them working:

onkeyup="var field=this; field.value=field.value.replace(/[^0-9\s()*.+-]/g,'');"

and

onfocus="var field = this; setTimeout(function() { field.addEventListener('input', function() { this.value = this.value.replace(/[^0-9\s()*.+-]/g,''); }); }, 500);"

Unfortunately, neither solution worked as expected.

What I’m trying to achieve is a phone field that accepts only numbers, spaces, parentheses ( ) , plus + , asterisk * , dash - and dot . .

For example, in my region it’s very common to format numbers like this:

+55 (61)9.0000-0000

Could someone suggest a reliable JavaScript snippet that works with s2Member’s custom registration fields to enforce this rule?

Thanks a lot!

1 Like

Very nice. :+1:

I found that the forum had held your reply for review. I just saw it and approved it. It didn’t use the original time you replied, but the time of my approval. So it looks like you just posted now, although it was actually before Gerard’s.

Check out his suggestion. It looks like it might do just what you need.

:slight_smile:

1 Like

Personally I’ve never tried forcing users to use such a prescribed textual format as I know almost nobody would be willing or even able to casually follow such strict formatting requirements. This is why I mentioned the “don’t let perfect the the enemy of good” comment.

Personally I’d look to see what is usually used locally and just out in place similar rules to ensure the correct number of numbers is input.
Good luck with it :blush::+1:

1 Like

Thanks for your attempts to help, but it didn’t work for me, I gave up, it was taking me too much time for something just a little detail.

2 Likes

yeah no worries, it did sounds too fiddly to get working properly.