magento 2 - add max length for input fields in Review & Payments/billing form
-
05-02-2021 - |
Question
I am trying to limit number of allowed characters on Firstname input field in my payment methods on Review & Payments area. I am using the magento default check/money order
payment method.
Basically this is the area that customers can indicate that their billing address is different from their shipping address.
To achieve this, I am extending Layoutprocessor.php
file in my custom module.
I have tried the following code, but it seems it is not working.
<?php
namespace MY_MODULE\Block\Checkout;
class LayoutProcessor extends \Magento\Framework\View\Element\AbstractBlock implements \Magento\Checkout\Block\Checkout\LayoutProcessorInterface
{
public function process($jsLayout) {
$jsLayout['components']
['checkout']['children']
['steps']['children']
['billing-step']['children']
['payment']['children']
['payments-list']['children']
['checkmo-form']['children']
['form-fields']['children']
['firstname']['max_text_length'] = 15;
return $jsLayout;
}
}
the max_text_length
is available in the following file.
magento2-2.1.6/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
.
https://github.com/magento/magento2/blob/2.1.6/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js#L56
I am using Magento 2.1.6 version.Please let me know if anyone knows a fix for it.
Solution
You can achieve this goal by using Plugins. First You should add the plugin file to MY_MODULE/etc/frontend/di.xml
<?xml version="1.0"?>
<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="my_module_checkout_block_checkout_layoutprocessor" type="MY_MODULE\Plugin\Checkout\Block\Checkout\LayoutProcessor" sortOrder="100"/>
</type>
</config>
then Create LayoutProcessor.php
under MY_MODULE/Plugin/Checkout/Block/Checkout/
and edit it like this
<?php
namespace MY_MODULE\Plugin\Checkout\Block\Checkout;
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
) {
$configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
foreach ($configuration as $paymentGroup => $groupConfig) {
if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['firstname']['validation'] = [
'required-entry' => true, 'min_text_length' => 1, 'max_text_length' => 15
];
}
}
return $jsLayout;
}
}