Issue 1594 - Enhance Phone Number Input Handling with State Management and Validation

[blitzboah]

Pull Requests Requirements

• The PR title includes a brief description of the work done, including the
  Issue number if applicable.
• The PR includes a video showing the changes for the work done.
• The PR title follows conventional commit label standards.
• The changes confirm to the OpenElis Global x3 Styleguide and design
  documentation.
• The changes include tests or are validated by existing tests.
• I have read and agree to the Contributing Guidelines of this project.

Summary

This PR improves the phone number input handling by:

• Using React state to manage the phone number value.
• Allowing only valid characters (+, numbers, and -).

Related Issue

#1594

[mozzy11]

This doesnt set a phone values for an existing patient

[mozzy11]

There should be a visible message on the UI not just in the console

[blitzboah]

does alert works?

[mozzy11]

why would you hard code a specific lenght

[blitzboah]

the length check was initially added to prevent premature validation while the user was still typing

[mozzy11]

On the old UI , there was an ajax call to validate the phone numbers. see where its used

[blitzboah]

I checked the old UI and found the Ajax call for phone number validation, but I couldn't get it to work in the latest version. It seems like the Ajax validation might not be in use anymore. For now, I have ensured that only numeric input is allowed in the phone field. Let me know if there's a specific API or validation method I should use instead!

[blitzboah]

@mozzy11 I noticed that the phone number validation API returns true only when the phone number is encoded (e.g., %2B225-12-23-56-23) but returns false for the same number when sent as +225-12-23-56-23 or without + as well

here's the controller CommonValidationsRestController.java.
.

For handling this on the frontend, should I:

1. Call the API on form submission and show a notification if the phone number is invalid?
2. Validate using regex on the frontend only and display an error message directly below the phone number field?

[blitzboah]

@mozzy11, I've implemented changes so that on form submission, the API will validate the phone number. The backend service expects the + to be URL-encoded and the number to follow the format 225-xx-xx-xx-xx, as mentioned in my previous response.

Here are some screenshots for reference:

let me know if you're good with these changes, or I can roll back to the previous implementation, which only accepted numeric input.

Thanks!