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?

  • 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" > – Gopal Patel Oct 31 '16 at 6:45
  • 1
    Hi @GopalPatel which files need to override as per your comment? – Ankit Shah Dec 7 '16 at 3:32
  • look at my answer, it is a best practise then the accepted one – LucScu Jan 20 '18 at 9:57
6

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.

  • This does exactly what I have asked for. Thanks for the detailed explanation. – Saroj Nov 1 '16 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 – Ankit Shah Dec 6 '16 at 6:07
  • In production mode you would need to re-deploy static content. One reason why you shouldn't develop in production mode. – Aaron Allen Dec 6 '16 at 6:11
  • Finally it works in Developer Mode. But it's not working in Production Mode :( – Ankit Shah Dec 7 '16 at 2:16
0

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, privacy policy and cookie policy

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