Bug? Input control - pattern shows error after value entered then backspace to remove

[Audioboy]

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

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

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

To Be clear… the above image shows placeholder text and the pattern regex is showing improper format

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.

[Audioboy]

Bump. Just to add… even if I change the regex to allow for null values once you get the “Invalid format” error it does not go away unless a new valid value is then entered. But, until then, it ends up showing an inconsistent UI state between the green (ok) control color and the message still being there.

My use case is that this is NOT a required field but when it is entered i want to check the pattern.

[patrick]

Normally the message should clear as soon when the field is valid. Are you using it with bootstrap 4?

[Audioboy]

Hi Patrick. thanks for the reply. I changed the pattern expression to allow null or a valid phone number pattern. When I type into the phone field with an invalid phone entry and then submit the form I then get the error message as I should. When I edit the form field to be a valid phone entry the error message does go away as it should. Ok so far. But, when I edit the form field to be empty (a valid condition) the input field switches correctly to a green border but the red error message does not go away. My use case requires either 1) and empty field value or 2) a valid phone in a valid format. So, the error message ends up being misleading because of not being cleared. To be clear the “+1” in the image is just placeholder text. The images shows an empty entry. I hope my explanation makes sense.