Magento 2 Add Custom Validation Checkout

We learn how to add custom validation checkout in Magento 2

Sometimes we need to use custom validation on checkout page. Magento provide many default validation. Here given some steps to create custom validation into checkout Magento 2:

• Step-1: Create requirejs-config.js at app/code/Dolphin/CustomValidation/view/frontend

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/validation/validator': {
                'Dolphin_CustomValidation/js/test-mixin': true
            }
        }
    }
}

Magento 2 Fast checkout extension

• Step-2: Create test-mixin.js at app/code/Dolphin/CustomValidation/view/frontend/web/js

define(
    ['jquery'],
   function($) {
  "use strict";
    return function(validator) {
        validator.addRule(
            'validate-five-words',
                function(value, element) {
                    // add you logic here
                    //return value.split(' ').length == 5;
                },
            $.mage.__('If any Error then put here the Message')
        );
        return validator;
    }
});

• Step-3: You can used this validation using layout checkout_index_index.xml.

<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    <item name="validate-five-words" xsi:type="boolean">true</item>
</item>

Now you can check your checkout page form where you put above validation field. Now successfully apply our custom validation.

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Mahesh Makwana

Author