Phone Number Field Validation Not Working – Unable to Purchase WordCamp Tickets

[arunpk92]

Describe the bug

we are encountering an issue with the phone number field validation while trying to purchase tickets for WordCamp. The validation for the phone number field does not seem to be functioning correctly, and as a result, users are unable to proceed with the ticket purchase.

To reproduce

Steps to reproduce the behavior:

1. Go to the WordCamp 2024 ticket purchase page from Android/ iPhone devices.
2. Fill out all required details, including the phone number.
3. Submit the form
4. See error

Expected behavior

The form should accept valid phone numbers and allow users to proceed with the ticket purchase.

Screenshots / Screencasts

https://ibb.co/6RD5cdp

WordCamp

If this is a problem on a specific WordCamp's site, list the site or page URL here. https://kerala.wordcamp.org/2024/

System (please complete the following information)

• Device: Android/ iPhone devices
• OS: Android/ IOS
• Browser: chrome, safari

Security Issues

To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[pkevan]

I can't see the screenshots for this issue.

[arunpk92]

Screenshots / Screencasts

https://ibb.co/6RD5cdp

[arunpk92]

I can't see the screenshots for this issue.

@pkevan When we try to enter a phone number, it does not accept any numbers. Attached the screenshot

[pkevan]

Thanks - I can reproduce only on android it seems. @ryelle any ideas?

[ryelle]

@arunpk92 In case there are country-code differences, can you share an example of a phone number you're trying to enter?

I can't reproduce the phone error on my android, but I never get to the payment processor on any device, it just keeps redirecting me back to the ticket form with "It doesn’t look like your form submitted any attendee information. Please try again."

I'll keep looking into this.

[arunpk92]

@ryelle I have tried with the +91 country code and also without it as 10 digits. Both times, it's showing the validation message: "Please enter only numbers."

[harishankerr]

@ryelle Confiming that I was able to replicate the same issue. It seems to be present in other websites, at least in delhi.wordcamp.org as well.

In short, when one attempts entering a phone number in any format and clicks "Checkout", it throws this error on a mobile device, basically in all platforms. It works perfectly fine on desktop though.

Here's a screenshot:

Full Size: https://d.pr/i/OEqJ7a

[ryelle]

Okay, I can see the error when I enter a number with spaces, but it was working for me when I entered only the numbers - that's why I was asking for an example phone number format. I'll see what I can do about debugging this further.

[StevenDufresne]

Why are phone numbers required?

[ryelle]

It's required for this payment processor (Instamojo, in this case).

I've tracked down the issue — on small screens, the admin bar has a .mobile class, which the form's validation was picking up as the input. The admin bar has no input value, so it never validates correctly. Writing up a fix for this now.

[arunpk92]

Thank you, @ryelle! It's working perfectly now.

[harishankerr]

Confirming that this is fixed. Major props for sorting this out and that too, in such short time, @ryelle!