Magento2: Custom validation in checkout address form

Question

I'm trying to add a custom validation to some input fields in checkout address forms. The official guide works fine on addressbook and other forms, extending mage/validator and using addMethod is simply and clean.

But for checkout address fields another library is used (why?!): Magento_Ui/js/lib/validation/validator which addRule lacks of many useful things. I would like to implement a rule that uses some jQuery function on the element (ie: checking the $(element).prop('disabled') status), but I can't figure how to get the field element because every rule calls has only value and params as parameters.

I read all the code in:

    ./vendor/magento/module-ui/view/base/web/js/lib/validation/validator.js
    ./vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js
    ./vendor/magento/module-ui/view/base/web/js/lib/validation/utils.js

and many docs (ie: official doc and many StackExchange threads), searching for a way to get the element where the rule is applied, but I can't find anything useful. The only way I found is passing input[name="the_input_name"] as parameter, but it won't work if there more than one input with the_input_name (ie: the same field name appears in shipping and payment addresses). Also seems impossible to clean up validation errors via jQuery.

After many hour of searching, trying and debugging I gave up and here I am, asking for help. Thanks in advance :)

Answer 1

Maybe I found a solution: instead using validator, I'm creating a new component extending Magento_Ui/js/form/element/abstract and writing my logic in validate method, so I can test the checked status of an input and conditionally validate another input.

Answer 2

You can add Magento by default validation or custom Js Validation in the checkout Address Form

List of the Magento default validation rules :

validate-grouped-qty

validate-one-checkbox-required-by-name

validate-date-between

validate-dob

max-words

min-words

range-words

letters-with-basic-punc

alphanumeric

letters-only

no-whitespace

zip-range

integer

vinUS

dateITA

dateNL

time

time12h

phoneUS

phoneUK

mobileUK

stripped-min-length

email2

url2

credit-card-types

ipv4

ipv6

pattern

allow-container-className

You can also use this link for more details "

https://developer.adobe.com/commerce/frontend-core/guide/validations/rule-list/

If you need more help, you can ping me again