Magento 2: What controls the validation of the shipping form? How can I add a callback to run when the validation is successful?

Question

I have a custom checkout module and as part of the design I need to run some custom JS when the shipping address form is valid. By default the form is validated when all the fields have values. I have been unable to find what triggers this validation to run.

I would like to prevent this validation until a user clicks a submit button and if the form is valid I run my custom js.

I have copied over the shipping.js from vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js and added a console log to all of the functions to get an understanding of when each is fired but they only appear to do so when the Next button is clicked. What file controls the validation of the form?

Answer 1

The checkout is managed mainly with knockout.js

The functions are only called in certain cases if all conditions are met.

The checkout is one of the most complex part of magento and an understanding of knockout.js is necessary

All form validation rules are in the following file :

Magento_Ui/web/js/lib/validation/rules.js

You can look at this repository to understand how it works:

https://github.com/sohelrana09/modified-checkout

• Steven Hall: Thanks for your response. That provides some good context. You mention "The functions are only called in certain cases if all conditions are met." Where are the functions that are called? Currently I am okay with when they are called but I would like to add to them. I can't find what functions are called once the form is filled out, namely the function(s) that checks for it being validated and shows the shipping options
• Nico2P: Probably this file : vendor/vertexinc/module-address-validation/view/frontend/web/js/view/checkout/shipping/address-validation.js You can find this file name for the delivery & billing address validation.
• Nico2P: If answer help, please upvote and accept as solution, so it will help other in community.