4

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

enter image description here

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

Last is to override page.

How to achieve this?

3

4 Answers 4

11

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 :)

3
  • Its great that you have find the file in which you have to edit. I want you to find the file on your own thats why i have not gave the reply on that answer. Because directory structure of magento is simple to understand and by small research you can get your file. Dec 7, 2016 at 7:42
  • very nice, but so you have limited the number of street lines to 2. i think is better mantein original loop and set max_length with a variable in base of loop index, so if a user set more of 2 lines could use anyway this code.
    – LucScu
    Jul 19, 2017 at 8:28
  • @AnkitShah I'm trying to do the same to set a Max Length for the input fields on checkout page. In your LayoutProcessor.php, how is this function afterProcess being called? This function doesn't exist in /Magento/module-checkout/Block/Checkout/LayoutProcessor.php. Thanks May 9, 2018 at 9:39
1

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!

0

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}">
1
  • 1
    Already know above thing. This is not what i'm looking for. Which template file needs to override?. Would like to display message to user that "Max Length is 50 Characters" for Line 1 & Same for Line 2 with "Max Length is 100 Characters"
    – Jackson
    Dec 6, 2016 at 5:55
0

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

1
  • This would be a better answer if you actually showed how to accomplish this to answer the question posed i.e. what XML would need to be overridden to add this validation. where would it go? Dec 7, 2022 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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