2

I need to add maxLength attribute to street line 1 and 2 in the Magento 2 check out page. How can I do this Magento 2? Can this be done from theme without creating a new module?

3
  • you can add maxlength="10" for input box like <input title="Street Address" name="billing[street][]" id="billing:street1" value="" class="input-text required-entry" type="text" maxlength="10" > Oct 31, 2016 at 6:45
  • 1
    Hi @GopalPatel which files need to override as per your comment?
    – Jackson
    Dec 7, 2016 at 3:32
  • look at my answer, it is a best practise then the accepted one
    – LucScu
    Jan 20, 2018 at 9:57

2 Answers 2

7

You can do this by overriding the input template in your theme. Create the file <theme_dir>/Magento_Ui/web/templates/form/element/input.html with this contents:

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled,
        maxlength: inputName.slice(0,6) === 'street' ? 30 : 'none'
    }" />

Replace the number 30 with whatever you want the max length to be. You then need to delete the contents of pub/static and var/view_preprocessed and possibly clear your browser cache to make sure the new template gets loaded.

Note: this could create problems if there are other inputs on the site using the name 'street' where you don't want to have a max length. To change the template for just the street inputs on checkout page would require creating a module.

4
  • This does exactly what I have asked for. Thanks for the detailed explanation.
    – Saroj
    Nov 1, 2016 at 3:11
  • It's not working for me in Magento 2 CE Version 2.1.2. I'm in Production Mode. I need to apply this on Checkout Page
    – Jackson
    Dec 6, 2016 at 6:07
  • In production mode you would need to re-deploy static content. One reason why you shouldn't develop in production mode. Dec 6, 2016 at 6:11
  • Finally it works in Developer Mode. But it's not working in Production Mode :(
    – Jackson
    Dec 7, 2016 at 2:16
2

The accepted answer is absolutly a bad patch. For example, if you have another input field named streetCustom it also takes the maxlength attribute.

Anyway, i think that you have to modify the php file where the input validation attributes are generated, so as well as avoid any problems, you also understand how it works.

The php file is Magento\Checkout\Block\Checkout\AttributeMerger and the method used to generate street input field is getMultilineFieldConfig, beacause street field is defined as multiline from eav_attribute db table.

Here you could add

...
// change max_length validation only for street attribute
if ( $attributeCode == 'street' ) {

    $line['validation']['max_text_length'] = 10;

}

// before
$lines[] = $line;
...

Now you have a proper and working validation in magento2 style for all lines of your street input field.

N.B.: change directly magento core files is a bad practice. If you considerer to use a best practice here i recommend to create a custom module and here you could take some hints.

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.