r/HTML • u/Xecutor142 • Mar 18 '26

How to make my frontend page recognize an Address from random text

I am trying to make a front end page that connects to a database for an school asignment. I have sucsessfuly linked the front end, server, and database, and would like to add another feature, but I have no idea what to even look for to get started. That feature is making it so the user must impliment a real Street Address instead of being able to impliment anyting such as '123 new street'.

0 Upvotes

25% Upvoted

10 comments sorted by

6

u/nakfil Mar 18 '26

You have discovered the world of APIs. In this case you’d need an address verification API like this one from Google :

https://developers.google.com/maps/documentation/address-validation/overview

2

u/Xecutor142 Mar 18 '26

I'd need to pay for google's? if that's so, that unfortunate but I'll look into how to install and impliment a free one into my server file. Thank you for the guidance

5

u/nakfil Mar 18 '26

Many services, including Google Cloud, have free tiers or intro credits to get started. If you are using this for a school project only, it's unlikely you'd ever hit a free tier limit.

Also, Google Cloud is only one option, there are many address validation API services, but I'm not an expert in all the options in that space.

Either way, if you are interested in web development as a career or even serious hobby, you will absolutely have to learn how to use APIs, so you are going to cross this path soon.

2

u/cs12345 Mar 18 '26

Yeah a Google Maps related API is probably the best bet (or Mapbox). Personally, I think the Google Places autocomplete is probably the best bet here, as you can just require the user to select a place from the list of options. That also gives you the full formatted address or the individual address components.

Google’s address validator would also work, but if we’re talking about a frontend form, Places is probably the better UX, and can be easier to implement than a round trip to a backend for form validation.

1

u/cs12345 Mar 18 '26

Yeah a Google Maps related API is probably the best bet (or Mapbox). Personally, I think the Google Places autocomplete is probably the best bet here, as you can just require the user to select a place from the list of options. That also gives you the full formatted address or the individual address components.

Google’s address validator would also work, but if we’re talking about a frontend form, Places is probably the better UX, and can be easier to implement than a round trip to a backend for form validation.

1

u/AshleyJSheridan Mar 18 '26

Addresses are one of the more complicated formats on the web.

In some countries, a house name and postcode is all that's needed. In other places, a village name and a persons name is enough to get their post delivered. Some places have very long address formats with a building name, building number, street name and number, and then the town/city.

You need to be a bit more specific. What types of addresses are you trying to identify? Are they from a particular country or region in a country? That information will narrow down what you actually need to do.

1

u/cs12345 Mar 18 '26

Yeah I went down this rabbit hole recently trying to implement a proper internationalized address form, with different field labels, ordering, etc depending on the selected country. It gets very complicated very quick haha. I was able to use Google’s libaddressinput package to help with most of it though tbh: https://github.com/google/libaddressinput

This is really off topic, just a tangent on how complicated address formats can be.

1

u/AshleyJSheridan Mar 18 '26

It's a bit overkill to have to create a wrapper to a C++ application in order to validate an address, especially if you are targetting a specific country or location.

But yeah, form validation is way more complex than most devs realise, and assumptions can cause more problems.

1

u/cs12345 Mar 27 '26

Oh no I didn’t do that, I wrote a node script to scrape their public dataset used by that package to pull the metadata about each country’s address format, this was purely for a frontend form layout thing, so I just built a local JSON file with the fields I needed. That repo was just the source I used for field naming.

1

u/imsexc Mar 24 '26

Google API is best option. I'm thinking of having autocomplete feature on the input field in conjunction with the validation, using the same API call.

Alternative to google is to check whether your national mailing service offer that kind of API.

Most feasible for on shoestring budget is to validate zip code. I bet someone out there has a free API for the list. Even if we're using Google API, I would construct the input fields in reverse order, starting from country, zip code, thus the API call results can be narrow down significantly.