# 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
<?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](/components/validators).

Client-side validators are part of the `Loki_FieldComponents` module. See [Component validators](/components/validators).

<div class="notice">More docs coming soon</div>