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?

• Rakesh Jesadiya: Have you got answer of this question?
• Jackson: No @Rakesh. I think magento.stackexchange.com/questions/148951/… Can apply class here Right ?
• Rakesh Jesadiya: Yes so i have think you have did for checkout, may be try with same method for above case.
• Jackson: Yes @Rakesh It's Gonna Work :)

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

• Jackson: Hi @Chirag. I already posted that link in comments
• jibin george: can you pass class name or ID so i can add css is that possible