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.
| 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, normal, relaxed, passthrough, 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. |
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. |
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." |
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. |
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. |
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. |