Form: problem with phone number validation pattern and wpml

How To
1

Hi there,

i’ve encountered an issue and i’m wondering if somebody has a solution for that.
My form contains a phone field with a validation pattern:

// pattern: 
^\+?[0-9\s\(\)\/\-]{5,20}$

// output:
pattern="^\+?[0-9\s\(\)\/\-]{5,20}$"

Since the page runs with WPML, the field appears in the translated strings and is required for translation.
I know it’s not neccessary but it also won’t hurt if string would be taken 1:1 as translated string.

But here’s the issue:
WPML shows the regex correctly in its translation editor but strips the backslashes while rendering, so this results in

pattern="^+?[0-9s()/-]{5,20}$ "

…which obviously breaks the validation pattern.

Unfortunately I didn’t find a way to exclude this from WPML yet.
Last (dirty) solution would be the hacky way through a frontend-sided javascript solution.

Any ideas about that?

3

@larsactionhero
Update all WPML components, especially:
-WPML Multilingual CMS
-WPML String Translation
-WPML Translation Management / ATE components
Don’t update only one WPML component; WPML itself recommends keeping the components in sync.
Check the actual generated HTML/source, not just what ATE displays. If ATE shows:

^+?[0-9\s()/-]{5,20}$

but the frontend generates:

^+?[0-9s()/-]{5,20}$

then the loss is happening after translation storage, during WPML’s rendering/processing.

Try WPML’s Classic Translation Editor temporarily. There have historically been separate ATE/translation-editor issues involving special characters and backslashes.

5

Hi @deepvyas,

thanks for the reply.

I’m not sure if you already read the full context – it’s obvious that the problem is caused by WPML’s before any frontend rendering.

Issue #1:
is caused earlier while entering the translated text – the validation regex is sanitized /escaped (stripped backslashes) before rendering the output:

^\+?[0-9\s\(\)\/\-]{5,20}$ ← original stored value in bricks
becomes
^+?[0-9s()/-]{5,20}$ ← modified by WPML

Issue #2:
WPML adds a whitespace at the end of the rendered regex.

pattern="^\+?[0-9\s\(\)\/\-]{5,20}$" ← correct original output
is rendered in frontend as
pattern="^+?[0-9s()/-]{5,20}$ " ← note the whitespace at the end

…which can’t work in any way, breaks validation and throws a console error due to malformed regex.

7

Sorry my mistake didn’t read precise your post…

Can you give a small PHP snippet that preserves the backslashes?
Regex is stored in a Bricks element setting, the key question is how WPML is registering that Bricks setting for translation.

8

what do you mean by that? I don’t understand why a php snippet would help since i’ve provided all needed information as seen above.