Magento 2: How to set Max Length for Street Address?

Question

I would like to set Max Length for Customer's Street Address 1 to 50 Characters & Street Address 2 to 100 Characters.

Changes will be applied on Frontend only, where we can find Street Address.

Last is to override page.

How to achieve this?

Answer 1

Finally I Got Solution by creating new Module :)

Referce Post: Magento 2 - How to affect street address in checkout forms with layout xml/ui arguments

magento\app\code\Custom\Checkout\registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Custom_Checkout', __DIR__
);

magento\app\code\Custom\Checkout\etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Checkout" setup_version="1.0.0" />
</config>

magento\app\code\Custom\Checkout\etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="Custom_Checkout" type="Custom\Checkout\Block\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

magento\app\code\Custom\Checkout\Block\LayoutProcessor.php

<?php

namespace Custom\Checkout\Block;

class LayoutProcessor {

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    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',
            '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, "min_text_len‌​gth" => 1, "max_text_length" => 50],
                ],
                    [
                    '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' => false, "min_text_len‌​gth" => 1, "max_text_length" => 50],
                ]
            ]
        ];
        return $jsLayout;
    }

}

Thanks :)

Answer 2

try to set maxLength

<input type="text" name="federal" maxlength="10"  value="" title="<?php /* @escapeNotVerified */ echo __('Federal Tax ID (EIN)') ?>" class="input-text" id="federal" data-validate="{required:true, 'federal':true}">

Answer 3

You can set the max length and/or many more other validation quite easily by just adding them to the correct element in the layout xml for the input form you want to affect.

<item name="street" xsi:type="array">
    <item name="validation" xsi:type="array">
        <!-- Classes for data validation: -->
        <item name="min_text_length" xsi:type="number">1</item>
        <item name="max_text_length" xsi:type="number">50</item>
    </item>
</item>

You can check out my comment here where you can find a list of some other available validations

Answer 4

To build on the solution from @Jackson, the plugin code can be simplified and implemented to cover however many address lines have been configured.

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array $jsLayout) 
{

    // Restrict street address length
    foreach ($jsLayout['components']['checkout']['children']
                      ['steps']['children']['shipping-step']['children']
                      ['shippingAddress']['children']['shipping-address-fieldset']['children']
                      ['street']['children'] as $line) {
        $line['validation']['max_text_length'] = 50;
    }

    return $jsLayout;
}

Note that while this is allegedly targeting the shipping address it also applies to the billing address on the checkout, at least on our site using BSS Commerce One Step Checkout it does. May not be the case for whatever checkout you're using so you'll need to investigate (debug) the unfeasibly complicated $jsLayout provided to see if billing also needs to be amended.

Bring on Hyva!