2

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.'),
                                    ],
                                ],
                            ],
                        ]
                    ),
                ],
            ],
        ];
    }
5

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.

  • I just tried this, it didn't give any effect on my Magento 2.2.2. btw, I'm using one step checkout module. but As I understand, one step checkout is also using Magentos checkout form. so it should work right? – Magento Learner May 29 '18 at 11:34
  • Yes, it's correct, if you rewrite checkout_index_index.xml in one step checkout module, then you need to rewrite checkout_index_index.xml from your module. – Evgeniy Kapelko May 29 '18 at 12:03
  • is this .xml the only file I need to validate the checkout form? I don't need to do anything with any js files? I can't get this to work... there's no effect on the checkout page. and I have cleared the cache. – Magento Learner May 29 '18 at 12:56
  • No, nothing is needed, just do as I do. – Evgeniy Kapelko May 29 '18 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.