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";

// set a country code here
const country = 'de';
const lang = "de";

let postcodeData;
let cityData;
let streetData;
let housenumber;

const postcodeInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("postcode"),
  myAPIKey, {
    lang: lang,
    type: "postcode",
    skipDetails: true,
    placeholder: "XXXXX",
    skipIcons: true,
    filter: {
      countrycode: [country]
    }
  });


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

const streetInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("street"),
  myAPIKey, {
    lang: lang,
    type: "street",
    skipDetails: true,
    skipIcons: true,
    placeholder: " ",
    filter: {
      countrycode: [country]
    }
  });

postcodeInput.setPostprocessHook((feature) => {
  // show only postcode in the dropdown
  return feature.properties.postcode;
});


postcodeInput.on('select', (postcode) => {
  postcodeData = postcode;

  // When you select a specific postcode, the input can be filled out automatically for many countries.
  if (postcode && !cityData && postcode.properties.city) {
    cityInput.setValue(postcode.properties.city);
  }

  updateFilters();
});


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

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

  if (city && city.properties.postcode) {
    postcodeInput.setValue(city.properties.postcode);
  }
 
  updateFilters();
});

streetInput.on('select', (street) => {
  if (street) {
    streetInput.setValue(street.properties.street);
  }
  
  if (street && !postcodeData && street.properties.postcode) {
  	postcodeInput.setValue(street.properties.postcode);
  }
  
  if (street && !cityData && street.properties.city) {
  	cityInput.setValue(street.properties.city);
  }
});

function updateFilters() {
  // update city filters
  if (postcodeData) {
    cityInput.addFilterByPlace(postcodeData.properties.place_id);
  } else {
    // set original filters
    cityInput.clearFilters();
    cityInput.addFilterByCountry([country]);
  }

  // update street filters
  if (postcodeData) {
    streetInput.addFilterByPlace(postcodeData.properties.place_id);
  } else if (cityData) {
    streetInput.addFilterByPlace(cityData.properties.place_id);
  } else {
    // set original filters
    streetInput.clearFilters();
    streetInput.addFilterByCountry([country]);
  }
}

function checkAddress() {
	const postcode= postcodeInput.getValue();
  const city = cityInput.getValue();
  const street = streetInput.getValue();
  const housenumber = document.getElementById("housenumber").value;
  
  const message = document.getElementById("message");
  message.textContent = "";
  
  if (!postcode || !city || !street || !housenumber) {
  	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)}&filter=countrycode:de&lang=${lang}&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 (!postcodeInput.getValue()){
  	toHightlight.push(postcodeInput.inputElement);
  }
  
  if (!cityInput.getValue()){
  	toHightlight.push(cityInput.inputElement);
  }
  
  if (!streetInput.getValue()){
  	toHightlight.push(streetInput.inputElement);
  }
    
  if (!document.getElementById("housenumber").value){
  	toHightlight.push(document.getElementById("housenumber"));
  }
  
  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 margin-right">
      <label for="postcode">Postleitzahl:</label><br>
      <div id="postcode" class="address-field autocomplete-container small-input"></div>
    </div>

    <div class="address-field-with-label main-part">
      <label for="city">Stadt:</label><br>
      <div id="city" class="address-field autocomplete-container"></div>
    </div>
  </div>
  <div class="address-row">
    <div class="address-field-with-label main-part">
      <label for="street">Straße:</label><br>
      <div id="street" class="address-field autocomplete-container"></div>
    </div>
  </div>
 
  <div class="address-row">
    <div class="address-field-with-label margin-right">
      <label for="housenumber">Hausnummer:</label><br>
      <input id="housenumber" class="geoapify-autocomplete-input small-input"/>
    </div>
    <div class="address-field-with-label main-part">
      <label for="app">Appartement, Suite (optional):</label><br>
      <input id="app" class="geoapify-autocomplete-input"/>
    </div>
  </div>
  <div id="message" class="message-container"></div>
  <div class="button-container"><button onclick="checkAddress()">Check address</button></div>
</div>