Address Validation

Use this class to provide styling and functionality for Miva's address validation feature.

Installation

This class is pre-installed and loaded asynchronously with Genesis out of the box on the pages listed below in the Enable Store Address Validation section.

1. Add import {AddressValidation} from 'extensions/address-validation'; to your JavaScript file.
2. Add @import "extensions/address-validation/index"; to your SCSS file.

Enable Store Address Validation

Follow the Setup and Configuration steps in Miva's Address Validation Guide to enable the native address validation functionality for the store.

The address validation functionality supports the following pages:

• ACAD
• ACED
• CADA
• CADE
• OCST

Example Usage

.mvt

See the default template by searching for the address_validation template under Theme Components > Content Sections in the admin or miva-templates/properties/readytheme_contentsection/address_validation.mvt repository file.

The template creates a l.settings:address_validation struct with the following members:

:is_not_addressfields - Flag to determine if the current page is not an address book page.
:primary_address
        :id - Primary address identifier. Used to load the customer validated addresses.
        :display - Primary address display. Used for UI output such as headings, as well as "to show" input check.
        :prefix - Primary fields input prefix.
:secondary_address
        :id - Secondary address identifier. Used to load the customer validated addresses.
        :display - Secondary address display. Used for UI output such as headings.
        :prefix - Secondary fields input prefix.
:hide_entered_addresses - Flag to control if user entered addresses should be hidden from the selectable addresses. Defaults to 0 (false).
:addresses - List of validation addresses.
:validated_primary_addresses_count - Count of validated primary addresses.
:validated_primary_addresses - List of validated primary addresses.
:non_validated_primary_addresses_count - Count of non-validated primary addresses.
:non_validated_primary_addresses - List of non-validated primary addresses.
:validated_secondary_addresses_count - Count of validated secondary addresses.
:validated_secondary_addresses - List of validated secondary addresses.
:non_validated_secondary_addresses_count - Count of non-validated secondary addresses.
:non_validated_secondary_addresses - List of non-validated secondary addresses.
:address_count - Current address iterator value (l.pos1). Typically used for UI output when iterating over address lists.

.js

Initialize the AddressValidation object:

Preferred asynchronous initialization:

(async () => {
    const addressValidationElement = document.getElementById('address-validation');

    if (!addressValidationElement) {
        return;
    }

    const {AddressValidation} = await import('extensions/address-validation');

    new AddressValidation(addressValidationElement);
})();

Alternatively:

import {AddressValidation} from 'extensions/address-validation';

new AddressValidation(document.getElementById('address-validation'));

Options

The AddressValidation class can take an optional configuration object for the second parameter to override any of the default configuration settings.

The following table defines the available configuration options:

Name	Type	Description	Default Value
formElement	HTMLElement String	Address validation form element.	'.js-validate-address'
primaryAddressElements	HTMLCollection NodeList String	Primary address elements.	'.js-primary-address'
primaryPrefixAttribute	String	Primary address prefix attribute, set on the root container element.	'data-primary-address-prefix'
secondaryAddressElements	HTMLCollection NodeList String	Secondary address elements.	'.js-secondary-address'
secondaryPrefixAttribute	String	Secondary address prefix attribute, set on the root container element.	'data-secondary-address-prefix'
secondaryShownElement	HTMLElement String	Element containing the attribute selector to flag if the secondary fields are displayed.	'[data-secondary-shown]'