OS info

• Operating System : macOS Catalina Ver: 10.15.7
• Wappler Version : 3.5.1

Problem description

I have a form with an input control for phone number which is optional. I have a pattern with a regex to validate the format if a user does enter something.

Input control form after load showing placeholder text

image958×242 17.2 KB

My regex:
data-rule-pattern="+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d| 2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]| 4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$|(^$)"

Input control with valid input

image958×258 20.3 KB

Steps to reproduce

1. Load form. Optional phone field is empty and showing placeholder text “+1”. No error message shown which is correct.
2. User enters something into the field. pattern regex either shows “Invalid format” error or not depding on what user enters . this is correct behavior
3. User then backspaces to clear out the control until the placeholder text appears “+1”. There is now no value in that control.
4. Now the pattern regex message “Invalid format” is still there. This is confusing to a user in terms of submitting the form?

Input control after user back spaces and is left with not entry but just the placeholder text

image968×286 20.5 KB

Desired behavior is that the warning message is not there with no value in the control after a value has been entered and then removed.

I would appreciate any help. Am I doing something wrong? Is this a bug? If so how can I work around it.

Thanks in advance.