2

I would like to add below class on "Firstname"

class="validate-length minimum-length-10 maximum-length-100"

It should be applied on Checkout Page.

domain.com/checkout/

Need to override file magento\vendor\magento\module-checkout\view\frontend\templates\onepage.phtml?

4

1 Answer 1

1

You can add that validation using overriding \Magento\Checkout\Block\Checkout\LayoutProcessor using plugin.

etc/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="custom_field" type="Vendor\Module\Plugin\Checkout\Model\Checkout\LayoutProcessor" sortOrder="100"/>
</type>

LayoutProcessor.php

<?php
namespace Vendor\Module\Plugin\Checkout\Model\Checkout\LayoutProcessor;
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 you can set your field that you want to customize*/
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['postcode'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
            'options' => [],
        ],
        'dataScope' => 'shippingAddress.postcode',
        'label' => 'Zip/Postal Code',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => ['required-entry' => true], //Here you can add you validation
    ];
    return $jsLayout;
  }
}
2
  • Hi @Chirag. I already posted that link in comments
    – Jackson
    Dec 7, 2016 at 8:17
  • can you pass class name or ID so i can add css is that possible Oct 25, 2019 at 12:18

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.