Edit in JSFiddle

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

const streetInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("street"),
  myAPIKey, {
  	type: "street",
    allowNonVerifiedHouseNumber: true,
    allowNonVerifiedStreet: true,
    skipDetails: true,
    skipIcons: true,
    placeholder: " "
  });

const stateInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("state"),
  myAPIKey, {
    type: "state",
    skipDetails: true,
    placeholder: " ",
    skipIcons: true
  });

const cityInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("city"),
  myAPIKey, {
    type: "city",
    skipDetails: true,
    skipIcons: true,
    placeholder: " "
  });


const countryInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("country"),
  myAPIKey, {
    type: "country",
    skipDetails: true,
    placeholder: " ",
    skipIcons: true
  });

const postcodeElement = document.getElementById("postcode");
const housenumberElement = document.getElementById("housenumber");

streetInput.on('select', (street) => {
  if (street) {
    streetInput.setValue(street.properties.street || '');
  }

  if (street && street.properties.housenumber) {
    housenumberElement.value = street.properties.housenumber;
  }

  if (street && street.properties.postcode) {
    postcodeElement.value = street.properties.postcode;
  }

  if (street && street.properties.city) {
    cityInput.setValue(street.properties.city);
  }

  if (street && street.properties.state) {
    stateInput.setValue(street.properties.state);
  }

  if (street && street.properties.country) {
    countryInput.setValue(street.properties.country);
  }
});

cityInput.on('select', (city) => {

  if (city) {
    cityInput.setValue(city.properties.city || '');
  }

  if (city && city.properties.postcode) {
    postcodeElement.value = city.properties.postcode;
  }

  if (city && city.properties.state) {
    stateInput.setValue(city.properties.state);
  }

  if (city && city.properties.country) {
    countryInput.setValue(city.properties.country);
  }
});

stateInput.on('select', (state) => {

  if (state) {
    stateInput.setValue(state.properties.state || '');
  }

  if (state && state.properties.country) {
    countryInput.setValue(state.properties.country);
  }
});

function checkAddress() {
  const postcode = document.getElementById("postcode").value;;
  const city = cityInput.getValue();
  const street = streetInput.getValue();
  const state = stateInput.getValue();
  const country = countryInput.getValue();
  const housenumber = document.getElementById("housenumber").value;

  const message = document.getElementById("message");
  message.textContent = "";

  if (!postcode || !city || !street || !housenumber || !state || !country) {
    highlightEmpty();
    message.textContent = "Please fill in the required fields and check your address again.";
    return;
  }

  // Check the address with Geoapify Geocoding API
  // You may use it for internal information only. Please note that house numbers might be missing for new buildings and non-mapped buildings. So consider that most addresses with verified streets and cities are correct.
  fetch(`https://api.geoapify.com/v1/geocode/search?housenumber=${encodeURIComponent(housenumber)}&street=${encodeURIComponent(street)}&postcode=${encodeURIComponent(postcode)}&city=${encodeURIComponent(city)}&state=${encodeURIComponent(state)}&country=${encodeURIComponent(country)}&apiKey=${myAPIKey}`).then(result => result.json()).then((result) => {
    let features = result.features || [];

    // To find a confidence level that works for you, try experimenting with different levels
    const confidenceLevelToAccept = 0.25;
    features = features.filter(feature => feature.properties.rank.confidence >= confidenceLevelToAccept);

    if (features.length) {
      const foundAddress = features[0];
      if (foundAddress.properties.rank.confidence === 1) {
        message.textContent = `We verified the address you entered. The formatted address is: ${foundAddress.properties.formatted}`;
      } else if (foundAddress.properties.rank.confidence > 0.5 && foundAddress.properties.rank.confidence_street_level === 1) {
        message.textContent = `We have some doubts about the accuracy of the address: ${foundAddress.properties.formatted}`
      } else if (foundAddress.properties.rank.confidence_street_level === 1) {
        message.textContent = `We can confirm the address up to street level: ${foundAddress.properties.formatted}`
      } else {
        message.textContent = `We can only verify your address partially. The address we found is ${foundAddress.properties.formatted}`
      }
    } else {
      message.textContent = "We cannot find your address. Please check if you provided the correct address."
    }
  });
}


function highlightEmpty() {
  const toHightlight = [];

  if (!document.getElementById("postcode").value) {
    toHightlight.push(document.getElementById("postcode"));
  }

  if (!cityInput.getValue()) {
    toHightlight.push(cityInput.inputElement);
  }

  if (!streetInput.getValue()) {
    toHightlight.push(streetInput.inputElement);
  }

  if (!document.getElementById("housenumber").value) {
    toHightlight.push(document.getElementById("housenumber"));
  }

  if (!stateInput.getValue()) {
    toHightlight.push(stateInput.inputElement);
  }

  if (!countryInput.getValue()) {
    toHightlight.push(countryInput.inputElement);
  }

  toHightlight.forEach(element => element.classList.add("warning-input"));

  setTimeout(() => {
    toHightlight.forEach(element => element.classList.remove("warning-input"));
  }, 3000);
}

<div class="address-collection-container">
  <div class="address-row">
    <div class="address-field-with-label main-part  margin-right">
      <label for="street">Street:</label><br>
      <div id="street" class="address-field autocomplete-container"></div>
    </div>
    
    <div class="address-field-with-label">
      <label for="housenumber">House number:</label><br>
      <input id="housenumber" class="geoapify-autocomplete-input small-input"/>
    </div>
  </div>

  <div class="address-row">
    <div class="address-field-with-label main-part">
      <label for="address-additional">Apartment, suite (optional):</label><br>
      <input id="address-additional" class="geoapify-autocomplete-input"/>
    </div>
  </div>

  <div class="address-row">
  
    <div class="address-field-with-label main-part  margin-right">
      <label for="city">City:</label><br>
      <div id="city" class="address-field autocomplete-container"></div>
    </div>
  
    <div class="address-field-with-label">
      <label for="postcode">ZIP code:</label><br>
      <input id="postcode" class="geoapify-autocomplete-input small-input"/>
    </div>
  </div>

  <div class="address-row">  
    <div class="address-field-with-label main-part  margin-right">
      <label for="state">State:</label><br>
      <div id="state" class="address-field autocomplete-container"></div>
    </div>
  
    <div class="address-field-with-label main-part">
      <label for="country">Country:</label><br>
      <div id="country" class="address-field autocomplete-container"></div>
    </div>
  </div>

  <div id="message" class="message-container"></div>
  <div class="button-container"><button onclick="checkAddress()">Check address</button></div>
</div>