Magento form validation doesn't work as user type in

Question

I have added form validation for the customer address form. but the issue is, validation works when I click submit button, it should work as user types in(key-up).

city text box

<input type="text" name="city" value="" title="City" class="input-text required-entry mage-error" id="city" data-validate="{required:true, 'validate-alphanum-with-spaces':true}" sr-only="INPUT" for="INPUT" aria-required="true" aria-invalid="true" aria-describedby="city-error">

postcode text box

<input type="text" name="postcode" value="" title="Zip/Postal Code" id="zip" class="input-text validate-zip-international required-entry mage-error" data-validate="{required:true, 'validate-alphanum-with-spaces':true}" sr-only="INPUT" for="INPUT" aria-required="true" aria-invalid="true" aria-describedby="zip-error">

script

<script type="text/x-magento-init">
{
    "#form-validate": {
        "addressValidation": {}
    },
    "#country": {
        "regionUpdater": {
            "optionalRegionAllowed": <?= /* @noEscape */ $block->getConfig('general/region/display_all') ? 'true' : 'false' ?>,
            "regionListId": "#region_id",
            "regionInputId": "#region",
            "postcodeId": "#zip",
            "form": "#form-validate",
            "regionJson": <?= /* @noEscape */ $this->helper(\Magento\Directory\Helper\Data::class)->getRegionJson() ?>,
            "defaultRegion": "<?= (int) $block->getRegionId() ?>",
            "countriesWithOptionalZip": <?= /* @noEscape */ $this->helper(\Magento\Directory\Helper\Data::class)->getCountriesWithOptionalZip(true) ?>
        }
    }
}

What can be the issue?