Skip to content

Script Attribute Reference Sheet

Muhammad Martinez edited this page May 23, 2022 · 1 revision

Using the Address Elements script only requires your Lob API key. However we provide extensive configuration through various script attributes. They are organized here by type of usage.

Verification and Autocomplete Behavior

Attribute Name Description
data-lob-key Required. Include your Lob live public key as the attribute value. It will use the format live_pub_* and is available via the Lob Dashboard.
data-lob-verify-value Options: strict, normalrelaxedpassthrough, false
Include this attribute to pre-verify the user's address submission with Lob. Choose relaxed (the default) as the attribute value, if you wish to allow users to submit an errant form once they have been warned. Their resubmission of an unchanged form will be used to indicate their preference to override and submit. Choose normal to halt any submissions that Lob deems undeliverable, while still allowing all other inconsistencies to be submitted once the user has confirmed their choice. Choose strict to halt any submission that does not pass verification, including minor errors like missing or unnecessary units. If you wish to verify an address and then submit regardless of the verification result, choose passthrough. This is useful for stateful forms that support repeated submissions. Enter false if you plan to use Address elements for autocompletion but not for verification.
data-lob-primary-value Set to false to disable address autocompletion and only use address verification. Default: true
data-lob-secondary-value Set to false to force the suite or unit number to render on the primary address line during address verification. Default: true
data-lob-autosubmit-value Set to false to prevent the address elements script from submitting the address form after verification. You will need to subscribe to the page events elements.us_verification.verification to know when an address was verified successfully.

Form Detection Attributes

Provide these to resolve any errors from our form detection process or simply to bypass it altogether.

Attribute Name Description
data-lob-primary-id This attribute identifies the primary address field. Set it to the ID for the field to target.
data-lob-secondary-id This attribute identifies the secondary address field. Set it to the ID for the field to target.
data-lob-city-id This attribute identifies the city field. Set it to the ID for the field to target.
data-lob-state-id This attribute identifies the state field. Set it to the ID for the field to target.
data-lob-zip-id This attribute identifies the zip field. Set it to the ID for the field to target.
data-lob-country-id This attribute identifies the country field. Set it to the ID for the field to target.

Localization - Custom Error Messages

Overrides common messages returned from the verification process.

Attribute Name Description
data-lob-err-primary-line Occurs when the primary line is missing. Default message is _"Default message is _"Enter the Primary address."
data-lob-err-city-state-zip Occurs when city, state, and zip are missing. Default message is "Enter City and State (or Zip)."
data-lob-err-zip Occurs when the country is missing. Default message is "Enter a country"
data-lob-err-country Occurs when zipcode is invalid. Default message is "Enter a valid Zip."
data-lob-err-undeliverable Lob cannot deliver mail to the address provided. Default message is "The address could not be verified."
data-lob-err-missing-unit An address was found however more specification is needed. Default message is "Enter a Suite or Unit."
data-lob-err-missing-secondary Similar to above, more specification needed. Default message is "Enter a Suite or Unit."
data-lob-err-unnecessary-unit Information from the secondary line is not needed. Default message is _"Suite or Unit _unnecessary."
data-lob-err-incorrect-unit Information on the secondary line is incorrect. Default message is "Incorrect Unit. Please confirm."
data-lob-err-confirm A similar address was found by Lob so we offer to correct the entered address. Default message is "Did you mean"
data-lob-err-default Catch-all for any other verification errors. Default message is "Unknown Error. The address could not be verified."

Show Input Level Errors

If your form displays error messages at specific inputs, you can pass along their ids and Address Elements will update the text content for said element and toggle is display. Any error messages associate with a specific input

Attribute Name Description
data-lob-primary-message-id This optional attribute identifies the field-level error message for the primary address input. Only include this attribute if the primary address input has an associated error message.
data-lob-secondary-message-id This optional attribute identifies the field-level error message for the secondary address input. Only include this attribute if the secondary address input has an associated error message.
data-lob-city-message-id This optional attribute identifies the field-level error message for the city input. Only include this attribute if the city input has an associated error message.
data-lob-state-message-id This optional attribute identifies the field-level error message for the state input. Only include this attribute if the state input has an associated error message.
data-lob-zip-message-id This optional attribute identifies the field-level error message for the zip input. Only include this attribute if the zip input has an associated error message.
data-lob-country-message-id This optional attribute identifies the field-level error message for the country input. Only include this attribute if the country input has an associated error message.

Form Error Placement

Determines where to place any error message returned after verifying an address.

Attribute Name Description
data-lob-verify-message-anchor-id This optional attribute will place the general error message before the element with the id provided.
data-lob-verify-message-anchor-class An alternative to data-lob-verify-message-anchor-id to search for the target element by class name. Note: data-lob-verify-message-anchor-id will take priority over data-lob-verify-message-anchor-class if it is present.

Styling

Modifies the appearance of error messages and autocomplete components. For more detail visit our Styling Guide

Attribute Name Description
data-lob-suggestion-color The text color for an item in the suggestion list.
data-lob-suggestion-bgcolor The background color for an item in the suggestion list.
data-lob-suggestion-bordercolor The border color for the suggestion list.
data-lob-suggestion-activecolor The text color for an item in the suggestion list when actively hovered over or when traversed via the keyboard.
data-lob-suggestion-activebgcolor The background color for an item in the suggestion list when actively hovered over or when traversed via the keyboard.
data-lob-err-color The text color to use when rendering a form-level error message when the form fails verification.
data-lob-err-bgcolor The background color to use when rendering a form-level error message when the form fails verification
data-lob-suggestion-stylesheet Default is false. Use this flag to stop the Address Elements library from loading its default stylesheet.