LWC: lightning-input-address custom validation

It is common practice to use lightning-input-address tag to fetch address information from user. However, sometimes we much show validation to one field or we must show a custom validation message. To achieve this functionality, we use the code below.

 <lightning-input-address 
    address-label="" 
    show-address-lookup="true"
    street-label="Street" 
    city-label="City" 
    country-label="Country" 
    province-label="State/Province" 
    postal-code-label="Postal Code" 
    country-options={getCountryOptions_For_Contact}
    province-options={getProvinceOptions_For_Contact}
    onchange={handle_Check_Validation} 
    address-lookup-placeholder="Search address...">
</lightning-input-address>

the above code also has global search lookup feature.

To handle to validation functionality and to display error message on specific field. we user below code. as part of example I will just show you one field. validation and similar can be implemented for rest of the fields.

As part of example I will show validation on country field. Let us say that country is always required even if user does not enter full address, atleast country should be selected.

handle_Check_Validation(event) {
	const address = this.template.querySelector('lightning-input-address');
	//Country Field Validation
	var country = address.country;
	if (!country) {
		address.setCustomValidityForField("Complete this field.", "country");
	} else {
		address.setCustomValidityForField("", "country"); //Reset previously set message
	}
    address.reportValidity();
}

Here there are 2 piece of code that we need to consider.
1)setCustomValidityForField()
2)reportValidity()

setCustomValidityForField()
Sets a custom error message to be displayed for the specified fieldName when the input address value is submitted.
This method takes 2 parameters namely Message and FieldName
Message – The string that describes the error. If message is an empty string, the error message is reset.
FieldName – Name of the field, which must be one of the following: street, city, province, postalCode, country.

reportValidity()
Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true.

Note:

1. reportValidity() is important, if that is missed then validation message is not alerted to end user.
2. You can use this code in onsubmit method as well.

Output:

Reference

Salesforce: lightning-input-address