Magento 2: How to add Class on Checkout Page?

Question

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?

Answer 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;
  }
}