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
| 1 2 3 4 5 6 7 8 9 | var config = { config: { mixins: { 'Magento_Ui/js/lib/validation/validator': { 'Dolphin_CustomValidation/js/test-mixin': true } } } } |
- Step-2: Create test-mixin.js at app/code/Dolphin/CustomValidation/view/frontend/web/js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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.
| 1 2 3 4 | <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.
