Here in new Billing address form in checkout page I have fields of Zip/Postal Code, and Phone number. I added Validation for those two working fine. But its getting saved if they are Empty. How to make the form should not submit if they are Empty.
MyVendor/MyModule/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="letters-only" xsi:type="boolean">true</item>
<item name="required-entry" xsi:type="boolean">true</item>
<item name="no-whitespace" xsi:type="boolean">false</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="letters-only" xsi:type="boolean">true</item>
<item name="required-entry" xsi:type="boolean">true</item>
<item name="no-whitespace" xsi:type="boolean">false</item>
</item>
</item>
<item name="postcode" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
<item name="custom_pincode_validation" xsi:type="string">true</item>
</item>
<item name="sortOrder" xsi:type="string">100</item>
</item>
<item name="city" xsi:type="array">
<item name="sortOrder" xsi:type="string">101</item>
</item>
<item name="region_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">102</item>
</item>
<item name="company" xsi:type="array">...</item>
<item name="fax" xsi:type="array">...</item>
<item name="country_id" xsi:type="array">...</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="mobileIN" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Here is the Validation file
app/code/MyVendor/BillingInfoForm/Plugin/Block/Checkout/LayoutProcessor.php
<?php
namespace MyVendor\BillingInfoForm\Plugin\Block\Checkout;
use Magento\Checkout\Block\Checkout\LayoutProcessor as MageLayoutProcessor;
class LayoutProcessor
{
public function afterProcess(MageLayoutProcessor $subject, $jsLayout)
{
/* config: checkout/options/display_billing_address_on = payment_method */
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']
)) {
foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'] as $key => $payment) {
/* postcode */
if (isset($payment['children']['form-fields']['children']['postcode'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['postcode'] = [
'component' => 'Magento_Ui/js/form/element/post-code',
'config' => [
'customScope' => 'billingingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
'id' => 'postcode'
],
'dataScope' => 'billingingAddress.postcode',
'label' => 'Zip/Postal Code',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' =>["required-entry" => true, "min_text_length" =>6,
"max_text_length" =>6,"no-whitespace"=> true,"validate-number"=>true],
'sortOrder' => 100,
'id' => 'postcode'
];
}
/* city */
if (isset($payment['children']['form-fields']['children']['city'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['city']['sortOrder'] = 101;
}
if (isset($payment['children']['form-fields']['children']['region_id'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region_id']['sortOrder'] = 102;
}
if (isset($payment['children']['form-fields']['children']['country_id'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['country_id']['sortOrder'] = 103;
}
/* telephone */
if (isset($payment['children']['form-fields']['children']['telephone'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['telephone'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billingingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
'id' => 'telephone'
],
'dataScope' => 'billingingAddress.telephone',
'label' => 'Phone Number',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' =>['required-entry' => true, "min_text_length" => 10,
"max_text_length" => 10,"no-whitespace"=> true,"validate-number"=>true],
'sortOrder' => 104,
'id' => 'telephone'
];
}
}
return $jsLayout;
}
}
}
Can I get help?. Thank you in advance
