Field validation and filtering

By default, every field is a Loki Component with a ViewModel (ComponentViewModel) and a repository (ComponentRepository). If the ViewModel class is extending from \LokiCheckout\Core\Component\AddressField\AddressFieldViewModel, you automatically get a basic validation for that field: If the field is required but the value is empty, then an error is added to the component - simple.

How validation works

A Loki Component field is at first nothing more than a pre-configured Alpine.js component. When the field value changes, the Alpine.js property value changes. And once the value is submitted (via the Alpine.js method submit()), it is pushed as a component update into the Loki AJAX queue and sibmitted to the server. Before this component update occurs, the value is (optionally) parsed client-side via validators.

Once the value is validated successfully and sent to Magento, the value is again validated server-side (PHP) and then saved via the Component Repository class.

Validating a field value

On top of this, each AddressFieldComponent is able to use a validator array where each validator is implementing \LokiCheckout\Validator\Component\AddressFieldValidatorInterface. This array is empty by default, but you could easily just override this yourself.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="LokiCheckout\Component\Checkout\Address\Postcode">
        <arguments>
            <argument name="validators" xsi:type="array">
                <item name="postcode" xsi:type="string">postcode</item>
            </argument>
        </arguments>
    </type>
</config>

How validators work

Server-side validators are part of the Loki_Components module. See Component validators.

Client-side validators are part of the Loki_FieldComponents module. See Component validators.