Inline validate an address
Wrap the Plauti Verify Address Input in a custom LWC to validate and save a full address directly on a record page
This article shows how to put the Plauti Verify Address Input (recordval-rv2-address-component) on a record page as an inline editor. The wrapper reads the current address, lets the user search, edit, and validate it, and saves all the address parts back to the record when validation passes.
If you have not yet, read Embedding Plauti Verify components on a record page first — it explains the wrapper pattern, the advice value used below, and the Lightning Web Security requirement for using these components in your own LWC.
Unlike the phone and email components, an address is made up of several fields. The component manages those parts internally and reports the whole address back to you in a single change event, so the wrapper maps several record fields at once.
What the Verify address component gives you
The address component accepts these properties (all optional):
| Property | Type | Description |
|---|---|---|
street | String | Street. |
house-number | String | House number (when shown). |
house-number-addition | String | House number addition (when shown). |
city | String | City. |
state | String | State/province as free text. |
state-code | String | State code, for orgs using State and Country picklists. |
postal-code | String | Zip/postal code. |
country | String | Country as free text. |
country-code | String | Country code, for orgs using State and Country picklists. |
default-country | String | ISO 3166-1 alpha-2 code used for suggestions when no country is set. |
allow-suggestion | Boolean | Enables the autocomplete address search. |
show-house-number | Boolean | Shows a separate house number field. |
show-house-number-addition | Boolean | Shows a separate house number addition field. |
enable-geocodes | Boolean | Returns latitude and longitude with the validated address. |
And it dispatches these events:
| Event | Detail |
|---|---|
change | The full address — street, houseNumber, houseNumberAddition, city, state, stateCode, postalCode, country, countryCode, latitude, longitude, message, statusCode, advice, and a meta object. Fired whenever any part changes, and again after a suggestion is picked or a validation completes. |
validated | advice, statusCode, message, credit, geoStatus — fired when the user validates the typed address. |
completed | Same shape as validated — fired when the user picks a suggestion from the address search. |
invalidated | advice, statusCode, message — fired when a field is edited, which clears the previous validation result. |
Because the change event already carries every address part and the latest advice, the wrapper can listen to a single event for both the data to save and the signal of whether it is safe to save.
The wrapper component
Create a Lightning Web Component, for example addressInlineValidate, with the three files below. This example binds to the standard Account billing address, but the field names are configurable.
The example markup is unstyledThis wrapper keeps the markup minimal to stay focused on the validation logic. It carries no SLDS layout or spacing — add your own utility classes so it matches the rest of your record page.
addressInlineValidate.html
<template>
<template if:false={editing}>
<lightning-formatted-address
street={address.street}
city={address.city}
province={address.state}
postal-code={address.postalCode}
country={address.country}>
</lightning-formatted-address>
<lightning-button-icon icon-name="utility:edit" variant="bare" onclick={handleEdit}></lightning-button-icon>
</template>
<template if:true={editing}>
<recordval-rv2-address-component
street={address.street}
city={address.city}
state={address.state}
postal-code={address.postalCode}
country={address.country}
default-country={defaultCountry}
allow-suggestion
onchange={handleChange}
onvalidated={handleValidated}
oncompleted={handleValidated}>
</recordval-rv2-address-component>
<lightning-button label="Save" onclick={handleSave}></lightning-button>
<lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
</template>
</template>addressInlineValidate.js
import {LightningElement, api, wire} from 'lwc';
import {getRecord, getFieldValue, updateRecord} from 'lightning/uiRecordApi';
export default class AddressInlineValidate extends LightningElement {
@api recordId;
@api objectApiName;
@api streetField = 'BillingStreet';
@api cityField = 'BillingCity';
@api stateField = 'BillingState';
@api postalCodeField = 'BillingPostalCode';
@api countryField = 'BillingCountry';
@api defaultCountry = 'US';
editing = false;
pendingAddress = {};
lastAdvice = '';
@wire(getRecord, {recordId: '$recordId', fields: '$wireFields'})
record;
get wireFields() {
if (!this.objectApiName) return [];
return [this.streetField, this.cityField, this.stateField, this.postalCodeField, this.countryField].map(
(field) => `${this.objectApiName}.${field}`
);
}
get address() {
const data = this.record?.data;
if (!data) return {};
return {
street: getFieldValue(data, `${this.objectApiName}.${this.streetField}`),
city: getFieldValue(data, `${this.objectApiName}.${this.cityField}`),
state: getFieldValue(data, `${this.objectApiName}.${this.stateField}`),
postalCode: getFieldValue(data, `${this.objectApiName}.${this.postalCodeField}`),
country: getFieldValue(data, `${this.objectApiName}.${this.countryField}`)
};
}
handleEdit() {
this.editing = true;
}
handleCancel() {
this.editing = false;
}
handleChange(event) {
this.pendingAddress = event.detail;
this.lastAdvice = event.detail.advice;
}
handleValidated(event) {
this.lastAdvice = event.detail.advice;
}
handleSave() {
if (this.lastAdvice !== 'GREEN') return;
const fields = {Id: this.recordId};
fields[this.streetField] = this.pendingAddress.street;
fields[this.cityField] = this.pendingAddress.city;
fields[this.stateField] = this.pendingAddress.stateCode || this.pendingAddress.state;
fields[this.postalCodeField] = this.pendingAddress.postalCode;
fields[this.countryField] = this.pendingAddress.countryCode || this.pendingAddress.country;
updateRecord({fields}).then(() => {
this.editing = false;
});
}
}A few things worth noting:
handleChangestores the entire address from the event detail, so every part is ready to save.- The save guard uses the
advicecarried on the latestchange(orvalidated/completed) event. Editing a field clears the advice, which prevents saving an unvalidated address. - When the org uses State and Country picklists, the component returns
stateCodeandcountryCode. The example prefers those over the free-textstateandcountry, and writes them to the standard text fields. If you are binding to the picklist-backed fields, mapstateCodetoBillingStateCodeandcountryCodetoBillingCountryCodeinstead.
addressInlineValidate.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Address Inline Validate</masterLabel>
<description>Inline edit wrapper for Plauti Verify address validation</description>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<property name="streetField" type="String" label="Street Field API Name" default="BillingStreet" />
<property name="cityField" type="String" label="City Field API Name" default="BillingCity" />
<property name="stateField" type="String" label="State Field API Name" default="BillingState" />
<property name="postalCodeField" type="String" label="Postal Code Field API Name" default="BillingPostalCode" />
<property name="countryField" type="String" label="Country Field API Name" default="BillingCountry" />
<property name="defaultCountry" type="String" label="Default Country (alpha-2)" default="US" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>Add it to a record page
- Deploy the component to your org.
- Open the record page in the Lightning App Builder.
- Drag your Address Inline Validate component onto the page.
- Set the five field API names to the address fields you want to validate. The defaults match the Account billing address; for the shipping address use
ShippingStreet,ShippingCity, and so on. - Set the default country, then save and activate.
recordId and objectApiName are provided automatically by the record page, so the wrapper validates and saves against the record being viewed.
Updated 7 days ago