Magento 2.2 Input field validation on Checkout page

magento.stackexchange https://magento.stackexchange.com/questions/325407

Question

In /vendor/magento/module-checkout/Block/Checkout/LayoutProcessor.php, I can find blow code (getBillingAddressComponent), which is used to validate the billing address input fields, and I can change the max/min input length to the value I wanted and it will work on checkout page.

I would like to do the same validation for shipping address. but I can't find the function like getShippingAddressComponent? How / Where can I edit valications for shipping address input fields?

   private function getBillingAddressComponent($paymentCode, $elements)
    {
        return [
            'component' => 'Magento_Checkout/js/view/billing-address',
            'displayArea' => 'billing-address-form-' . $paymentCode,
            'provider' => 'checkoutProvider',
            'deps' => 'checkoutProvider',
            'dataScopePrefix' => 'billingAddress' . $paymentCode,
            'sortOrder' => 1,
            'children' => [
                'form-fields' => [
                    'component' => 'uiComponent',
                    'displayArea' => 'additional-fieldsets',
                    'children' => $this->merger->merge(
                        $elements,
                        'checkoutProvider',
                        'billingAddress' . $paymentCode,
                        [
                            'country_id' => [
                                'sortOrder' => 115,
                            ],
                            'region' => [
                                'visible' => false,
                            ],
                            'region_id' => [
                                'component' => 'Magento_Ui/js/form/element/region',
                                'config' => [
                                    'template' => 'ui/form/field',
                                    'elementTmpl' => 'ui/form/element/select',
                                    'customEntry' => 'billingAddress' . $paymentCode . '.region',
                                ],
                                'validation' => [
                                    'required-entry' => true,
                                ],
                                'filterBy' => [
                                    'target' => '${ $.provider }:${ $.parentScope }.country_id',
                                    'field' => 'country_id',
                                ],
                            ],
                            'postcode' => [
                                'component' => 'Magento_Ui/js/form/element/post-code',
                                'validation' => [
                                    'required-entry' => false,
                                ],
                            ],
                            'company' => [
                                'validation' => [
                                    'max_text_length' => 5,
                                ],
                            ],
                            'fax' => [
                                'validation' => [
                                    'min_text_length' => 0,
                                ],
                            ],
                            'telephone' => [
                                'config' => [
                                    'tooltip' => [
                                        'description' => __('For delivery questions.'),
                                    ],
                                ],
                            ],
                        ]
                    ),
                ],
            ],
        ];
    }
Was it helpful?

Solution

I'll show you how to do this on the example of validating a company name.

Create the file :

NameSpace/Module/view/frontend/layout/checkout_index_index.xml

In it, I will insert rules for validation name = 'company'.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
            <referenceBlock  name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="region_id" xsi:type="array">...</item>
                                                                    <item name="postcode" xsi:type="array">...</item>
                                                                    <item name="company" xsi:type="array">
                                                                        <item name="validation" xsi:type="array">
                                                                            <item name="min_text_length" xsi:type="number">0</item>
                                                                            <item name="max_text_length" xsi:type="number">9</item>
                                                                            <item name="letters-only" xsi:type="boolean">true</item>
                                                                            <item name="required-entry" xsi:type="boolean">true</item>
                                                                            <item name="max-words" xsi:type="number">2</item>
                                                                        </item>
                                                                    </item>
                                                                    <item name="fax" xsi:type="array">...</item>
                                                                    <item name="country_id" xsi:type="array">...</item>
                                                                    <item name="telephone" xsi:type="array">...</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
    </body>
</page>

The list of validation rules is:

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo

And this is what we get : enter image description here enter image description here

I hope that my answer will bring you closer to resolving your question.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top