Magento2: Pattern Validation via UI Component Fails to Interpret String as RegEx Pattern

[bap14]

When using a UI Component based form and adding a custom regular expression pattern validation to an input field, the supplied pattern is not properly converted from a string to a javascript RegEx object.

Preconditions

1. Magento EE 2.1.7, Magento CE 2.1.7
2. PHP 7.0.17
3. MySQL 5.7.18

Steps to reproduce

1. Create a custom UI Component form
2. Add a validation item to an input field

3. Specify a pattern validation rule with a custom regular expression pattern. E.g.

   <item name="validation" xsi:type="array">
       <item name="required-entry" xsi:type="boolean">true</item>
       <item name="no-whitespace" xsi:type="boolean">true</item>
       <item name="pattern" xsi:type="string">^[a-zA-Z][a-zA-Z0-9_.-]{3,}$</item>
   </item>
   

Expected result

1. The pattern value should be interpreted as a RegEx object OR sent through new RegEx within the javascript.

Actual result

1. A javascript error is thrown that param.test is not a function.
   
   

[veloraven]

@bap14 thank you for your report.
Given this issue is reported against Enterprise edition, please report via the Support portal of your account or Partner portal if you are a partner reporting on behalf of a merchant. Github is intended for Community edition reports given no account management for CE users. This will allow for proper tracking of issues at the account level.

[bap14]

@veloraven I installed Magento CE 2.1.7 and added my custom module and confirmed this does occur in the CE release as well. I would prefer to keep this in the public domain in case there are other developers running into this same issue. I can report it in both if necessary. I'll update the initial posting to include the CE edition as well.

[bap14]

I didn't specify this earlier, but I was working in the admin area, not the frontend.

[floplus]

Magento CE 2.1.7, Frontend Shippment Address in Checkout, added pattern validation by LayoutProcessorPlugin:

... ['shipping-address-fieldset']['children']['street']['children'][0]['validation']['pattern'] = "/.*[0-9].*/";

Same problem: is passed as string to pattern validation in rules.js

[Stas94]

@bap14 If this issue is actual for Enterprise Edition only, please address it to Magento Support.

[bap14]

As specified a few comments back @Stas94 the issue occurs in both CE and EE.

[magento-engcom-team]

@bap14, thank you for your report.
We've created internal ticket(s) MAGETWO-80609 to track progress on the issue.

[magento-team]

Internal ticket to track issue progress: MAGETWO-82426

[okorshenko]

The issue has been fixed and delivered to 2.2-develop branch. Will be available with 2.2.2 release

[magento-team]

Hi @bap14. Thank you for your report.
The issue has been fixed in magento-engcom/magento2ce#1284 by @magento-engcom-team in 2.3-develop branch
Related commit(s):

The fix will be available with the upcoming patch release.

[sidolov]

Hi @bap14. Thank you for your report.
The issue has been fixed in magento/magento2#17213 by @mageprince in 2.1-develop branch
Related commit(s):

• 64bad6b6f0ded98af843eb711a8d1781cec97e66
• 50f4051c1a38dd1eba1e2a210e68e6771534ba82

The fix will be available with the upcoming 2.1.15 release.