11

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.

4
  • Hi, how did you solve this? Commented Sep 21, 2018 at 12:49
  • @maciej-domski Did you solve this? Commented Sep 25, 2018 at 7:31
  • This may help others magento.stackexchange.com/questions/262239/… Commented Mar 29, 2019 at 9:24
  • @Maciej Domski check my answer.i tried it for confirmation email and it's working code Commented Nov 6, 2019 at 4:56

2 Answers 2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.