Magento 2 checkout custom field validation

Question

Magento2 checkout - what is the best method to add validation for my custom checkout field which depends on selected shipping method?

For e.g. I am adding field to address form in LayoutProcessor where I can specify validation rules. I need to make this field required if my custom carrier is selected.

My goal is to prevent the user from going to the next step if my custom field is not filled. I know I am able to add custom validations before order placement (Review & Payments step) but I need to validate it a step before.

Answer 1

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',

Answer 2

yes it is possible by changing in Magento_Checkout/js/model/shipping-save-processor/default.js

I have added field confirm email which must same as email and it's required field in the checkout, you can customize according to requirement.

app\code\Ketan\Checkout\view\frontend\requirejs-config.js

var config = {
    "map": {
       "*": {
           "Magento_Checkout/js/model/shipping-save-processor/default" : "Ketan_Checkout/js/shipping-save-processor"
       }
   }
}

extend js file app\code\Ketan\Checkout\view\frontend\web\js\shipping-save-processor.js

/*
* *
*  @author DCKAP Team
*  @copyright Copyright (c) 2018 DCKAP (https://www.dckap.com)
*  @package Dckap_CustomFields
*/
define(
   [
       'ko',
       'Magento_Checkout/js/model/quote',
       'Magento_Checkout/js/model/resource-url-manager',
       'mage/storage',
       'Magento_Checkout/js/model/payment-service',
       'Magento_Checkout/js/model/payment/method-converter',
       'Magento_Checkout/js/model/error-processor',
       'Magento_Checkout/js/model/full-screen-loader',
       'Magento_Checkout/js/action/select-billing-address',
       'jquery'
   ],
   function (
       ko,
       quote,
       resourceUrlManager,
       storage,
       paymentService,
       methodConverter,
       errorProcessor,
       fullScreenLoader,
       selectBillingAddressAction,
       $
   ) {
       'use strict';

       return {
           saveShippingInformation: function () {
               var payload;

               var username = $("#customer-email").val();
               var conformusername = $("#conformusername").val();

              /*============ Customization Start =============*/
              //if(quote.shippingMethod().method_code=='flaterate'){ // Check if flaterate is selected
                if(conformusername != username){
                  $("#conformusername-error").show(); // show hidden message
                  $("#conformusername").focus();      // move cursor to the point
                  return false;
                 }
              // }
              /*============ Customization End =============*/


               if (!quote.billingAddress()) {
                   selectBillingAddressAction(quote.shippingAddress());
               }
               payload = {
                   addressInformation: {
                       shipping_address: quote.shippingAddress(),
                       billing_address: quote.billingAddress(),
                       shipping_method_code: quote.shippingMethod().method_code,
                       shipping_carrier_code: quote.shippingMethod().carrier_code
                   }
               };
               fullScreenLoader.startLoader();

               return storage.post(
                   resourceUrlManager.getUrlForSetShippingInformation(quote),
                   JSON.stringify(payload)
               ).done(
                   function (response) {
                       quote.setTotals(response.totals);
                       paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                       fullScreenLoader.stopLoader();
                   }
               ).fail(
                   function (response) {
                       errorProcessor.process(response);
                       fullScreenLoader.stopLoader();
                   }
               );
           }
       };
   }
);