Magento 2 - How to use pattern validation

Question

I'm using a plugin to validate the street field (based on https://magento.stackexchange.com/a/158101/28803) and I want to use the validation method 'pattern' to test for the following regex:

.*[0-9].*

Complete code:

```

public function afterProcess(
 \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
 array $jsLayout
) {
 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
 'component' => 'Magento_Ui/js/form/components/group',
 'label' => __('Street Address'),
 'required' => true,
 'dataScope' => 'shippingAddress.street',
 'provider' => 'checkoutProvider',
 'sortOrder' => 60,
 'type' => 'group',
 'additionalClasses' => 'street',
 'children' => [
 [
 'component' => 'Magento_Ui/js/form/element/abstract',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/input'
 ],
 'dataScope' => '0',
 'provider' => 'checkoutProvider',
 'validation' => ['required-entry' => true, 'pattern' => '.*[0-9].*'],
 ],
 [
 'component' => 'Magento_Ui/js/form/element/abstract',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/input'
 ],
 'dataScope' => '1',
 'provider' => 'checkoutProvider',
 'validation' => ['required-entry' => true, 'pattern' => ".*[0-9].*"],
 ]
 ]
 ];
 return $jsLayout;
}

} ```

However validation' => ['required-entry' => true, 'pattern' => ".*[0-9].*"], doesn't work (it generates a blank page on checkout). What am I doing wrong?

enter image description here

I'm using Magento 2.1.2 with vagrant.

• Jackson: Try 'pattern' => '^[0-9]$'
• Tjitse: Hi Ankit, thanks for you help. Unfortunately this doesn't work, it generates the same blank checkout page (see screenshot above). Any other suggestions?
• nenne: Check your browser console for javascript errors. There might be something useful there. What you are changing is basically a configuration for the JS on the checkout page. If rendering stops it might be that something breaks the javascript execution.
• graney: I am having the same issue. The reason is that the pattern function expects a JS regular expression and it is receiving a string instead.
• Tjitse: And did you find the solution @graney?

Answer 1

I've found a different method; by using a custom validation method in rules.js:

"validate-adres": [
 function(value) {
 return /[0-9]/.test(value);
 },
 $.mage.__('Your street address must contain a housenumber')
],

Combined with the above answer snippet this validates the street address with regex.