Magento – Toggle “required/not required” field in checkout

checkoutmagento2validation

I have added a custom field in checkout called "Area". Area field is required by default, but I'd like to change that based on the selected country.

If customer selects a country other than FR, then Area field should become optional (not required).

Can you help me do that?

require([
    "jquery",
    "jquery/ui",
    "domReady!"
],
function($) {
    function load() {

        var country_select = $('div#shipping-new-address-form>div[name="shippingAddress.country_id"]>div.control>select.select');

        country_select.change(function () {
            var selected_country = $('div#shipping-new-address-form>div[name="shippingAddress.country_id"]>div.control>select.select :selected').val();

            if(selected_country == 'FR'){
                // make Area field required
            }else{
                // make Area field optional
            }

        });
    }
});

Best Answer

Add 'validation' index in layout processor for your custom field as

'validate-area-required' => true,

And add your mixin validation-mixin.js with

define([
    'jquery',
    'Magento_Ui/js/lib/validation/utils'
], function ($, utils) {
    "use strict";

    return function (validator) {            
        validator.addRule(
            'validate-area-required',
            function (value) {
                var selected_country = $('div#shipping-new-address-form>div[name="shippingAddress.country_id"]>div.control>select.select :selected').val();
                if(selected_country == 'FR'){
                    return true;
                }else{
                    return false;
                }

            },
            $.mage.__('Required field.')
        );
        return validator;
    }
});

Not tested...Hope it will work!

Related Solutions

Magento – Magento 2 checkout custom field validation

try this, just add 'validation' => ['required-entry' => true] like below in LayoutProcessor plugin

'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'custom_field'
            ],
            'dataScope' => 'customfield',
            'label' => 'custom field # :',
            'provider' => 'checkoutProvider',
            'validation' => ['required-entry' => true],
            'visible' => true,
            'sortOrder' => 250,
            'id' => 'custom_field'

Magento 2.2.3 – How to Create Custom Form

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
    </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php

namespace Vendor\Module\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        return '/companymodule/controller_name/custom';
        // here controller_name is index, action is booking
    }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="email" type="text">
    <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Custom extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $email       = $post['email'];
          
            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/custom');

            return $resultRedirect;
        }
  
    }
}

Best Answer

Related Solutions

Magento – Magento 2 checkout custom field validation

Magento 2.2.3 – How to Create Custom Form

Related Topic